javascript - jQuery 重复自动滚动从上到下和从下到上 x 时间

Question

我正在继续这个question自动滚动到页面底部然后顶部并重复。

这是一个JS Fiddle .

正如您在 fiddle 上看到的那样，当页面加载时，它会直接滚动到底部。我希望当页面加载时，等待大约 10 秒，然后将其滚动到底部。如果滚动到底部页面也是如此，等待大约 10 秒，然后滚动到顶部。

代码:

$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 4000); 
},4000);
setInterval(function(){
 // 4000 - it will take 4 secound in total from the top of the page to the bottom
$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 4000); 
},4000);

},8000);

Answer 1

考虑到滚动动画所花费的时间，您只需一个间隔即可完成此操作...

$("html, body").animate({ scrollTop: $(document).height() }, 4000);

setInterval(function(){
    $("html, body").animate({ scrollTop: ($(window).scrollTop()==0 ? $(document).height() : 0) }, 4000);
},14000);

您没有提到如果用户手动将滚动更改到中间位置会发生什么。使用此解决方案，在当前 10 秒间隔后，滚动将返回到顶部并重新开始。

希望对你有帮助...