动画 ScrollTop 用于单页锚的侧边导航答案

【问题标题】：Animating ScrollTop for side navigation for single page anchors动画 ScrollTop 用于单页锚的侧边导航
【发布时间】：2015-07-17 19:15:16
【问题描述】：

我正在尝试为单个页面上的锚点与突出显示的一侧的固定导航之间的平滑过渡设置动画。我是一个完全的新手，所以我不知道如何实现“（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');
});

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

【问题讨论】：

标签： javascript jquery animation navigation scrolltop

【解决方案1】：

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

    $('#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/

【讨论】：

【解决方案2】：

这可能对你有用：

http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/

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

希望对你有用。

【讨论】：