Jquery Auto Scroll Website With Pause

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 artic

Solution 1:

Here is an working example

setInterval(functionscroll() {
  $("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;
}

mainsection {
  background: #DDD;
  width: 90%;
  margin: 30px auto;
  padding: 10px15px;
  min-height: 1000px;
}

<scriptsrc="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(functionscroll() {
  $("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(functionscroll() {
  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(functionscroll() {
  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);
    }
  }
  ...