Javascript Jquery自动滚动不工作

我有一个单页设计，并希望有一个自动滚动效果时，导航链接被点击。不确定为什么滚动效果不起作用。我添加了警报函数，以查看

$（sectionID）.offset（）是否返回一个值。因此，如果有人能解释这个问题，我们将不胜感激

jsfiddle：

html:

你能为这个添加提琴吗？你的“副导航”div在另一个可滚动div中吗？你能为这个添加提琴吗？你的“副导航”div在另一个可滚动div中吗？请提供一个简短的解释，说明你的代码在做什么，不要简单地转储它这不是回答问题的答案。请阅读评论并用更多的解释来改进答案。请提供一个简短的解释，说明你的代码在做什么，不要简单地转储它这不是回答问题的答案。请阅读评论并用更多的解释来改进答案
<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>

$(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)
    })
}

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