自动滚动到每个div暂停，然后连续进行

Question

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>

Answer 1

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/

Answer 2

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>