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

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秒内覆盖更短的距离。

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