javascript - 滚动顶部，然后滚动底部，然后滚动顶部，然后滚动底部

Question

我想做一个自动滚动器。它应该慢慢滚动到底部，然后慢慢滚动到顶部，所以......

这是我写的，

$(".scrollballer").animate({ scrollTop: $(document).height() }, 12000);

setTimeout(function() {
   $('.scrollballer').animate({scrollTop:0}, 12000); 
},12000);

setInterval(function(){

$(".scrollballer").animate({ scrollTop: $(document).height() }, 12000);

setTimeout(function() {
   $('.scrollballer').animate({scrollTop:0}, 12000); 
},12000);

},12000);

但是，从上到下滚动时滚动速度更快。如何使其速度相同？

Answer 1

问题是 setInterval 设置为 12000，但需要 24000 才能回到顶部，因此 setInterval 应为 24000。

setInterval(function() {

    $(".scrollballer").animate({ scrollTop: $(document).height() }, 12000);

    setTimeout(function() {
       $('.scrollballer').animate({scrollTop:0}, 12000); 
    },12000);

}, 24000); // <-- Don't run again until the full down/up cycle is complete

<小时/>

但是，有更好的方法可以做到这一点。改进此问题的第一步是使用 .animate 回调，而不是 setTimeout。

setInterval(function() {
    // Use a callback to schedule the "up" animation-------------------------v
    $(".scrollballer").animate({scrollTop:$(document).height()}, 12000, function() {
       $('.scrollballer').animate({scrollTop:0}, 12000); 
    });

}, 24000);

<小时/>

下一步是认识到内部的.animate()也可以接受回调，所以我们真的不需要setInterval()。回调更好，因为 JS 计时器并不完美，并且一个 .animate() 可以在前一个完成之前启动。使用回调可以防止这种情况发生。

// -----------v---create a named function that performs the down/up animations
(function down_then_up() {

    $(".scrollballer").animate({scrollTop:$(document).height()}, 12000, function() {

    // Use the `down_then_up` function as a callback----v--- to repeat the cycle
       $('.scrollballer').animate({scrollTop:0}, 12000, down_then_up); 
    });

})(); // <-- invoke the `down_then_up` immediately to get it going.

所以在这里我创建了一个名为 down_then_up 的函数来执行滚动页面的循环。该函数由最后的 () 立即调用。然后，在返回顶部的内部 .animate() 调用中，我将 down_then_up 函数作为回调传递。

<小时/>

编辑

另一个问题是，当您向下滚动时，您会移动整个窗口高度，即使它比实际的图像容器大。因此，如果窗口高度为 800，jQuery 将根据该数字进行计算，因此它认为需要以合适的速度在 12 秒内到达那里。

但是，在向上的过程中，它从当前位置开始(实际上只是容器高度)并向上滚动到0，所以现在如果容器高度为224，jQuery 根据该数字进行计算，这意味着它需要更慢地移动才能在 12 秒内覆盖较短的距离。

如果您根据容器高度而不是窗口设置滚动距离，则无论向上还是向下都会计算移动相同的距离，并且您将获得均匀的速度。