Question

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

如果你无法理解我的问题，那就是这样：Example from 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

以下是一个工作示例

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

修改

我编辑了一点代码片段，因此代码不是两次。我声明函数（scroll()）并在区间内使用它。由于这一点，在开始时不需要相同的代码。

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

jquery自动滚动网站暂停

1 个答案: