Javascript 为单页定位的侧边导航设置ScrollTop动画

我试图在一个页面上的锚定点之间设置一个平滑过渡的动画，在突出显示的一侧有一个固定的导航。我是一个完全的新手，所以我不知道如何实现“（document.body）.animate”或者做转换所需的任何东西

tl；博士： 平滑滚动到锚点，而不是跳到锚点

以下是js：

$('#firstlink').addClass('active');

$(window).scroll(function(){
    $('.active').each(function(){
        $(this).removeClass('active');
    });

    var scrollTop = $(window).scrollTop();


    if($(window).scrollTop() + $(window).height() == $(document).height()) 
        $('#fifthlink').addClass('active');
    else if (scrollTop > $("#fifth").position().top)
        $('#fifthlink').addClass('active');
    else if (scrollTop > $("#fourth").position().top)
        $('#fourthlink').addClass('active');
    else if (scrollTop > $("#third").position().top)
        $('#thirdlink').addClass('active');
    else if (scrollTop > $("#second").position().top)
        $('#secondlink').addClass('active');
    else
        $('#firstlink').addClass('active');
});

---

以下是完整的JSFIDLE:

这可能对您有用：

我在自己的网站上使用它，而且效果很好

---

希望这对您有用。

这可能在其他地方得到了回答，但这应该可以做到：

    $('#sidenav a').on('click', function(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        var scrollTo = $(target).offset().top;
        var duration = 1000;

        $('body').animate({
            scrollTop: scrollTo 
        }, duration);
    });

在窗口滚动事件之后添加它