jQuery的自动滚动网站暂停

Question

How can I set jQuery auto scroll web page and with pause / stop for a specific px and continue auto scrolling? It's something like a user scrolling on the web page reading an article, like scroll and stop and continue scrolling something like that. I can't seem to find a good example on the internet and all I got the answer from searching is only jQuery auto scroll example only.

If you can't understand my question it's something looks like this: Example from codepen

Here is my code:

$("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?

By the way, I am new in jQuery, do you mind explain a little bit to me what is the meaning of both of the 500 and 1000 second meaning? I know it refers to second but what is the meaning of adding 2 of it? Thanks!

Answer 1

Here is an working example

 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> 

EDIT

I edited a little bit snippet so that the code was not twice. I declare function ( scroll() ) and use it inside interval. Thanks to that there is no need for the same code at the begining.

EDIT2

If you want the scroll to stop depending on px and not section just change this:

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

To this:

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

EDIT3

If you want to scroll to bottom at the end, you can do it like this:

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