jQuery AutoScroll不起作用

Question

I have a one page design and want to have an auto scroll effect when a nav link is clicked. Not sure why the scrolling effect is not working. I added the alert function to see if $(sectionID).offset().top is returning a value and it is. So if someone can explain the problem it would be greatly appreciated.

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)