CODEWITHSUNDEEP
javascriptjqueryhtml
test u
test u

Reputation: 37

Auto scroll to each div pause and then move on continuously

I would like to create function to scroll to each div with "class=res-" pause and then move onto the next div pause and so on - once it gets to the last div it will restart at the top and continuously do this function. Any help would be greatly appreciated! 

<!--*class "res-<some number>" is dynamic so it will never have a static "some number"-->
<div class="main_window">
  <div class="res-1">
    scroll to me then pause for 5 seconds next move to res-2
  </div>

  <div class="res-2">
    scroll to me then pause for 5 seconds next move to res-8-5
  </div>

  <div class="res-8-5">
    scroll to me then pause for 5 seconds next move to top and repeat 
  </div>
</div>

Upvotes: 0

Views: 254

Answers (2)

Speeday
Speeday

Reputation: 73

You can achieve this via jQuery also.

$(document).ready(function() {
    var selector = "div[class^='res-']";
    var firstSelect = $("div[class^='res-']:first");
    var lastSelect = $("div[class^='res-']:last");

    $(firstSelect).addClass('active');

    setInterval(function() {
        var next = $(".main_window .active") .removeClass('active').next(selector);

        if (!next.length) next = next.prevObject.siblings(':first');
    
        next.addClass('active');

        $section = $('.active');

        scroll();
    }, 5000);

});

function scroll() {
    $('html, body').animate({ scrollTop: ($section.offset().top)},300);    
}
div[class^='res-'] {
    height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_window">
    <div class="res-1">scroll to me then pause for 5 seconds next move to res-2
    </div>
    <div class="res-2">scroll to me then pause for 5 seconds next move to res-8-5
    </div>
    <div class="res-8-5">scroll to me then pause for 5 seconds next move to top and repeat
    </div>
</div>

You can check it's Output here - https://jsfiddle.net/ydeepak1/jord3spu/11/

Upvotes: 2

FZs
FZs

Reputation: 18619

You can do it using JavaScript setInterval() and element.scrollIntoView().

Note that the options of .scrollIntoView() doesn't have too good cross-browser support.

Also note that this will try to scroll your element relative to the window, rather than its parent.

const elements = document.querySelectorAll('[class^=res-]');
let active = 0;
setInterval(()=>{
  if( ++active >= elements.length) active = 0;
  
  //poor support for options
  elements[active].scrollIntoView({
    behavior:'smooth',
    block:'start' //Where to align current item: 'start', 'end' or 'center'
  })
},5000)
[class^=res-]{
  /* huge margin to see scrolling effect*/
  margin-bottom:500px;
}
<div class="main_window">
  <div class="res-1">
    scroll to me then pause for 5 seconds next move to res-2
  </div>

  <div class="res-2">
    scroll to me then pause for 5 seconds next move to res-8-5
  </div>

  <div class="res-8-5">
    scroll to me then pause for 5 seconds next move to top and repeat 
  </div>
</div>

Upvotes: 1

Related Questions