Javascript 自动从上到下滚动页面，然后备份（并重复）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8107251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatically Scroll Page from Top to Bottom, then Back Up (and Repeat)
提问by zzz
I'm trying to figure out how to, upon pageload, automatically scroll to the bottom of a page (which has been described sufficiently here) and then scroll back up automatically upon reaching the bottom of the page. I can find the automatic scrolling to the bottom, but I can't figure out how to identify when I'm at the bottom of the page, and how to scroll back up when I am. I'd do this using generic Javascript (or JQuery).
我试图弄清楚如何在页面加载时自动滚动到页面底部（已在此处进行了充分描述），然后在到达页面底部时自动向上滚动。我可以找到自动滚动到底部，但我不知道如何识别我何时在页面底部，以及如何向上滚动。我会使用通用 Javascript（或 JQuery）来做到这一点。
Thanks in advance!
提前致谢！
回答by Aneon
Try this: http://jsfiddle.net/yjYJ4/
试试这个：http: //jsfiddle.net/yjYJ4/
$('html, body').animate({ scrollTop: $(document).height() - $(window).height() }, 1000, function() {
$(this).animate({ scrollTop: 0 }, 1000);
});
You can view the demo in full screen here: http://jsfiddle.net/yjYJ4/embedded/result/
您可以在此处全屏查看演示：http: //jsfiddle.net/yjYJ4/embedded/result/
Change the number "1000" if you want to increase or decrease speed.
如果要提高或降低速度，请更改数字“1000”。
Works fine in Chrome, Firefox and IE 6-9.
在 Chrome、Firefox 和 IE 6-9 中运行良好。
EDIT:
编辑：
If you need it to repeat forever (not recommended...) you could do like this: http://jsfiddle.net/QUCWe/
如果你需要它永远重复（不推荐......）你可以这样做：http: //jsfiddle.net/QUCWe/
回答by MohitGhodasara
here is the example using Pure JavaScript
这是使用纯 JavaScript 的示例
<script type="application/javascript">
var Height = document.documentElement.scrollHeight;
var currentHeight = 0;
var bool = true;
var step = 5;
var speed = 10;
var interval = setInterval(scrollpage, speed)
function scrollpage() {
if (currentHeight < 0 || currentHeight > Height)
bool = !bool;
if (bool) {
window.scrollTo(0, currentHeight += step);
} else {
// if you don't want to continue scroll
// clearInterval(interval) use clearInterval
window.scrollTo(0, currentHeight -= step);
}
}
</script><style type="text/css">
#top {
border: 1px solid black;
height: 10000px;
}
#bottom {
border: 1px solid red;
}
</style><div id="top">top</div>
<div id="bottom">bottom</div>回答by J.S.
Be aware that the suggested infinite scroll JSFiddle code will work in firefox however will not work in Chrome/Chromium without a valid
请注意，建议的无限滚动 JSFiddle 代码将在 firefox 中工作，但在没有有效的 Chrome/Chromium 中将无法工作
<!DOCTYPE html>tag at the start of ones page. Per This Answer
标签在一个页面的开头。根据这个答案
回答by Rob W
You can pass a function as an argument, which will be called when the end has reached. I've just written a jQuery plugin for this purpose. Fiddle: http://jsfiddle.net/kKaWZ/
您可以将函数作为参数传递，当到达结束时将调用该函数。为此，我刚刚编写了一个 jQuery 插件。小提琴：http: //jsfiddle.net/kKaWZ/
(function($){
$.fn.downAndUp = function(time, repeat){
var elem = this;
(function dap(){
elem.animate({scrollTop:elem.outerHeight()}, time, function(){
elem.animate({scrollTop:0}, time, function(){
if(--repeat) dap();
});
});
})();
}
})(jQuery);
$("html").downAndUp(2000, 5)
回答by Tim Joyce
$("body").animate({ scrollTop: '1000' }, 500, function(){
$("body").animate({ scrollTop: '0' }, 500, function(){
$("body").animate({ scrollTop: '1000' }, 500);
});
});
