自动从顶部滚动页面到底部,然后备份(和重复)

zzz*_*zzz 9 javascript jquery scroll

我试图找出如何,在页面加载,自动滚动到页面底部(这已经足够说明这里),然后再在到达页面底部会自动向上滚动.我可以找到自动滚动到底部,但我无法弄清楚当我在页面底部时如何识别,以及如何在我的时候向上滚动.我会使用通用的Javascript(或JQuery)来做到这一点.

提前致谢!

Ane*_*eon 12

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

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

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

如果要增加或减少速度,请更改数字"1000".

适用于Chrome,Firefox和IE 6-9.

编辑:

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


Moh*_*ara 5

这是使用纯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>
Run Code Online (Sandbox Code Playgroud)
<style type="text/css"> #top {
  border: 1px solid black;
  height: 10000px;
}
#bottom {
  border: 1px solid red;
}
</style>
Run Code Online (Sandbox Code Playgroud)
<div id="top">top</div>
<div id="bottom">bottom</div>
Run Code Online (Sandbox Code Playgroud)

  • 很有用。谢谢。我在寻找不会使用jquery的代码。并找到了这个... (2认同)