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);
    }
  }
  ...