Question

我试图找出如何在页面加载时自动滚动到页面底部（已经充分描述here），然后在到达页面底部时自动向上滚动。我可以找到自动滚动到底部，但我无法弄清楚当我在页面底部时如何识别，以及如何在我的时候向上滚动。我会使用通用的Javascript（或JQuery）来做到这一点。

提前致谢！

Answer 1

试试这个： http://jsfiddle.net/yjYJ4/

$('html, body').animate({ scrollTop: $(document).height() - $(window).height() }, 1000, function() {
    $(this).animate({ scrollTop: 0 }, 1000);
});

您可以在此处全屏查看演示：http://jsfiddle.net/yjYJ4/embedded/result/

如果要增加或减少速度，请更改数字“1000”。

适用于Chrome，Firefox和IE 6-9。

编辑：

如果你需要它永远重复（不推荐......）你可以这样做：http://jsfiddle.net/QUCWe/

Answer 2

这是使用Pure JavaScript的示例

< script >

  function scrollpage() {
    function f() {
      window.scrollTo(0, i);
      if (status == 0) {
        i = i + 40;
        if (i >= Height) {
          status = 1;
        }
      } else {
        i = i - 40;
        if (i <= 1) { // if you don't want continue scroll then remove this if condition 
          status = 0;
        }
      }
      setTimeout(f, 0.01);
    }
    f();
  }
var Height = document.documentElement.scrollHeight;
var i = 1,
  j = Height,
  status = 0;
scrollpage(); < /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>

Answer 3

您可以将函数作为参数传递，该函数将在结束时调用。我刚刚为此编写了一个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)

Answer 4

请注意，建议的无限滚动JSFiddle代码将在firefox中运行，但如果没有有效的

，则无法在Chrome / Chromium中运行

<!DOCTYPE html>

标记在一页的开头。 Per This Answer

Answer 5

$("body").animate({ scrollTop: '1000' }, 500, function(){
    $("body").animate({ scrollTop: '0' }, 500, function(){
        $("body").animate({ scrollTop: '1000' }, 500);
    });
});

自动从顶部滚动页面到底部，然后备份（和重复）

5 个答案: