是否有可能与jQueryanimationscrollTop？

我想顺利地向下滚动。 我不想为此写一个函数 – 特别是如果jQuery已经有一个。

Answer 1

您可以使用.animate() scrollTop属性，如下所示：

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

Answer 2

尼克的答案很好。 在animate（）调用中指定complete（）函数时要小心，因为声明了两个select器（html和body），将会执行两次。

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

以下是如何避免双重callback。

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

Answer 3

尼克的答案效果很好，默认设置很好，但是您可以通过完成所有可选设置来更好地控制滚动。

这里是它在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/

Answer 4

我有我认为是比$('html, body')黑客更好的解决scheme。

这不是一行代码，但是我使用$('html, body')是，如果在animation过程中logging$(window).scrollTop() ，则会看到值遍历整个地方，有时甚至上百个像素（尽pipe我没有看到类似的情况）。 我需要这个值是可预测的，这样如果用户在自动滚动期间抓住滚动条或者旋转鼠标滚轮，我可以取消animation。

这里是一个function将animation顺利滚动：

 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); } }); } } 

下面是一个更复杂的版本，它将取消用户交互animation，以及直到达到目标值为止，这在试图立即设置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); } } } ); } } 

Answer 5

就像Kita提到的那样，当你在'html'和'body'上设置animation时，多个callback会触发问题。 而不是animation和阻塞后续的callback，我更喜欢使用一些基本的function检测，只animation一个对象的scrollTop属性。

在另一个线程上接受的答案提供了一些有关哪个对象的scrollTop属性，我们应该尝试animation： pageYOffset在IE8中滚动和animation

 // 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... }) }); 

更新 – – –

上面的function检测尝试失败。 似乎没有一个单行的方式做webkittypes的浏览器pageYOffset属性总是返回零时有一个文档types。 相反，我find了一种方法来使用promise来每次执行animation时都执行一次callback。

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

Answer 6

其他示例中的页面刷新后，animation总是从页面顶部开始，我遇到了一些问题。

我解决这个问题，而不是直接animation的CSS，而是调用window.scrollTo(); 每一步：

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

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

看看http://james.padolsey.com/javascript/fun-with-jquerys-animate/了解更多关于jQuery的animationfunction的信息。;

Answer 7

您可以使用具有特定持续时间的滚动页面的jQueryanimation：

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

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

Answer 8

试试scrollTo插件。

Answer 9

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

Answer 10

但是如果你真的想在滚动的时候添加一些animation，你可以试试我的简单的插件（ AnimateScroll ），它目前支持30多种缓动样式

Answer 11

如果您想在页面末尾向下移动（因此您不需要向下滚动到底部），则可以使用：

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

Answer 12

跨浏览器的代码是：

 $(window).scrollTop(300); 

它是没有animation，但无处不在