是否有可能与jQueryanimationscrollTop?

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

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

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

尼克的答案很好。 在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'); } } } ); 

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

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

我有我认为是比$('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); } } } ); } } 

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

其他示例中的页面刷新后,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的信息。;

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

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

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

试试scrollTo插件。

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

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

如果您想在页面末尾向下移动(因此您不需要向下滚动到底部),则可以使用:

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

跨浏览器的代码是:

 $(window).scrollTop(300); 

它是没有animation,但无处不在