jQuery的自动滚动网站暂停

Question

如何设置jQuery自动滚动网页并为特定的px设置暂停/停止并继续自动滚动？ 这就像用户在网页上滚动以阅读文章一样，例如滚动并停止并继续滚动类似的内容。 我似乎无法在互联网上找到一个很好的示例，而我从搜索中得到的答案仅仅是jQuery自动滚动示例而已。

如果您听不懂我的问题，它看起来像这样： 来自Codepen的示例

这是我的代码：

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

setTimeout(function() {
$('html, body').animate({scrollTop:0}, 1000); // 1000 is the duration of the animation
},500);

setInterval(function(){

$("html, body").animate({ scrollTop: $(document).height() }, 500); //  Speed from Bottom to top

setTimeout(function() {
$('html, body').animate({scrollTop:0}, 5000); // Speed from Top to bottom
},500); // What is this speed refer to?

},1000); // What is this speed refer to?

顺便说一句，我是jQuery的新手，您介意向我解释一下500秒和1000秒的含义是什么吗？ 我知道它是指第二个，但是加上2个是什么意思？ 谢谢！

Answer 1

这是一个有效的例子

 setInterval(function scroll() { $("section").each(function(i, e) { $("html, body").animate({ scrollTop: $(e).offset().top }, 500).delay(500); // First value is a speed of scroll, and second time break }); setTimeout(function() { $('html, body').animate({ scrollTop: 0 }, 5000); // This is the speed of scroll up }, 4000); //This means after what time should it begin (after scrolling ends) return scroll; }(), 9000); //This value means after what time should the function be triggered again //(It should be sum of all animation time and delay) 9000 = 5000 + 4000 

 main { background: #EEE; } main section { background: #DDD; width: 90%; margin: 30px auto; padding: 10px 15px; min-height: 1000px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <main> <section> </section> <section> </section> <section> </section> <section> </section> </main> 

编辑

我编辑了一些代码段，以使代码不会重复两次。 我声明了函数（ scroll() ）并在interval内部使用它。 因此，一开始就不需要相同的代码。

EDIT2

如果您希望滚动停止取决于px而不是部分，则只需更改以下内容即可：

setInterval(function scroll() {
  $("section").each(function(i, e) {
    $("html, body").animate({
      scrollTop: $(e).offset().top
    }, 500).delay(500); // First value is a speed of scroll, and second time break
  });
  ...

对此：

setInterval(function scroll() {
  for (var i = 0; i < 4000; i += 800) {
    $("html, body").animate({
      scrollTop: i
    }, 500).delay(500);
  }
  ...

EDIT3

如果您想滚动到底部的底部，可以这样做：

setInterval(function scroll() {
  for (var i = 0; i < 4000; i += 800) {
    $("html, body").animate({
      scrollTop: i
    }, 500).delay(500);
    if (i + 800 >= 4000) {
      $("html, body").animate({
        scrollTop: $(document).height()
      }, 500).delay(500);
    }
  }
  ...