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


当前回答

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

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

其他回答

在其他例子中,动画总是从页面刷新后的页面顶部开始。

我通过不直接动画css来修复这个问题,而是调用window.scrollTo();每一步:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

这也解决了html vs body的问题,因为它使用跨浏览器的JavaScript。

关于jQuery的animate函数的更多信息,请访问http://james.padolsey.com/javascript/fun-with-jquerys-animate/。

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

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

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

试试scrollTo插件。

尼克的回答很好,默认设置也很好,但你可以通过完成所有可选设置来更全面地控制滚动。

下面是它在API中的样子:

.animate( properties [, duration] [, easing] [, complete] )

所以你可以这样做:

.animate( 
    {scrollTop:'300px'},
    300,
    swing,
    function(){ 
       alert(animation complete! - your custom code here!); 
       } 
    )

这是jQuery .animate函数的api页面:http://api.jquery.com/animate/

但如果你真的想在滚动时添加一些动画,你可以试试我的简单插件(AnimateScroll),它目前支持30多种easing样式