Jquery AutoScroll不工作

Question

我有一个单页设计，并希望在单击导航链接时具有自动滚动效果。不确定为什么滚动效果不起作用。我添加了alert函数以查看$(sectionID).offset().top是否正在返回值。因此，如果有人能解释这个问题，我们将不胜感激。

jsfiddle：https://jsfiddle.net/8t881403/

HTML：

<div class="sub-nav">
  <nav>
    <ul>
      <li><a href="#mission">Mission</a></li>
      <li><a href="#why-cs">Why CS</a></li>
      <li><a href="#learning-experience">Learning Experience</a></li>
      <li><a href="#spartan-success">Spartan Success</a></li>
    </ul>
  </nav>
</div>

jquery的：

$(function() {

  autoScroll();

});

function autoScroll() {
    $('.sub-nav a').click(function (e) {
        e.preventDefault();
        var sectionID = $(this).attr('href');
        alert($(sectionID).offset().top);
        $('html body').animate({ scrollTop: $(sectionID).offset().top
        }, 1000)
    })
}

Answer 1

var div = $('.sub-nav');
setInterval(function(){
    var pos = div.scrollTop();
    div.scrollTop(pos + 2);
}, 200)