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


当前回答

尼克的回答很管用。在animate()调用中指定complete()函数时要小心,因为它将被执行两次,因为你声明了两个选择器(html和body)。

$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            alert('this alert will popup twice');
        }
    }
);

下面是避免双重回调的方法。

var completeCalled = false;
$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            if(!completeCalled){
                completeCalled = true;
                alert('this alert will popup once');
            }
        }
    }
);

其他回答

你可以使用jQuery动画滚动页面与特定的持续时间:

$("html, body").animate({scrollTop: "1024px"}, 5000);

其中1024px是滚动偏移量,5000是以毫秒为单位的动画持续时间。

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

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

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

尼克的回答很管用。在animate()调用中指定complete()函数时要小心,因为它将被执行两次,因为你声明了两个选择器(html和body)。

$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            alert('this alert will popup twice');
        }
    }
);

下面是避免双重回调的方法。

var completeCalled = false;
$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            if(!completeCalled){
                completeCalled = true;
                alert('this alert will popup once');
            }
        }
    }
);

就像Kita提到的有多个回调发射的问题,当你在“html”和“身体”动画。我更倾向于使用一些基本的特征检测,只对单个对象的scrollTop属性进行动画处理,而不是同时对两者进行动画处理并阻塞后续的回调。

在这个另一个线程上接受的答案给出了一些关于哪个对象的scrollTop属性我们应该尝试动画:pageYOffset滚动和动画在IE8

// UPDATE: don't use this... see below
// only use 'body' for IE8 and below
var scrollTopElement = (window.pageYOffset != null) ? 'html' : 'body';

// only animate on one element so our callback only fires once!
$(scrollTopElement).animate({ 
        scrollTop: '400px' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

更新- - -

上述特征检测的尝试失败了。似乎没有一行的方法来做它,因为webkit类型的浏览器pageYOffset属性总是返回零时,有一个doctype。 相反,我找到了一种方法,使用承诺做一个单一的回调每次动画执行。

$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});