javascript - 动画ScrollTop用于单页 anchor 的侧面导航

我正在尝试动画化单个页面上的锚点之间的平滑过渡，并在侧面突出显示固定的导航。我是一个新手，所以我不知道如何实现“（document.body）.animate”或进行转换所必需的一切。

tl; dr：
平滑滚动到锚点，而不是跳转到锚点

这是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');
});

这是完整的jsfiddle：https://jsfiddle.net/e03u0kqe/

最佳答案

这可能是在其他地方回答的，但是应该这样做：

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

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

https://jsfiddle.net/e03u0kqe/2/

关于javascript - 动画ScrollTop用于单页 anchor 的侧面导航，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31483131/