我想平滑地向下滚动。我不想为此写一个函数——特别是如果jQuery已经有了一个。


当前回答

我有什么我相信是一个更好的解决方案比$('html,身体')黑客。

这不是一行程序,但我用$('html, body')遇到的问题是,如果在动画期间记录$(window). scrolltop(),你会看到值到处跳,有时是数百个像素(尽管我在视觉上没有看到任何类似的情况)。我需要值是可预测的,这样如果用户在自动滚动时抓住滚动条或旋转鼠标滚轮,我就可以取消动画。

下面是一个平滑滚动动画的函数:

function animateScrollTop(target, duration) {
    duration = duration || 16;
    var scrollTopProxy = { value: $(window).scrollTop() };
    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target }, 
            { duration: duration, step: function (stepValue) {
                var rounded = Math.round(stepValue);
                $(window).scrollTop(rounded);
            }
        });
    }
}

下面是一个更复杂的版本,它将在用户交互时取消动画,以及重新发射,直到达到目击值,这在试图立即设置scrollTop时很有用(例如,简单地调用$(window).scrollTop(1000) -以我的经验,这在大约50%的情况下失败。)

function animateScrollTop(target, duration) {
    duration = duration || 16;

    var $window = $(window);
    var scrollTopProxy = { value: $window.scrollTop() };
    var expectedScrollTop = scrollTopProxy.value;

    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target },
            {
                duration: duration,

                step: function (stepValue) {
                    var roundedValue = Math.round(stepValue);
                    if ($window.scrollTop() !== expectedScrollTop) {
                        // The user has tried to scroll the page
                        $(scrollTopProxy).stop();
                    }
                    $window.scrollTop(roundedValue);
                    expectedScrollTop = roundedValue;
                },

                complete: function () {
                    if ($window.scrollTop() != target) {
                        setTimeout(function () {
                            animateScrollTop(target);
                        }, 16);
                    }
                }
            }
        );
    }
}

其他回答

如果你想在页面的末尾向下移动(所以你不需要向下滚动到底部),你可以使用:

$('body').animate({ scrollTop: $(document).height() });

你可以使用.animate() scrollTop属性,就像这样:

$("html, body").animate({ scrollTop: "300px" });
$(".scroll-top").on("click", function(e){
   e.preventDefault();
   $("html, body").animate({scrollTop:"0"},600);
});

试试scrollTo插件。

跨浏览器代码是:

$(window).scrollTop(300); 

它没有动画,但在任何地方都适用