jQuery scroll to sections in button click

Question

I'm having problem to scroll in each section separately by using the same button. If I click for the first time, this should send me to section2, and then If i click again the same button, this should send me to section3

I have tried to make it by every click to scroll 500px to bottom or something like that but seems that this is not good solution for me.

 $(document).ready(function() { $('.scroller').click(function() { var fuller = $(this).closest('.fullscreen').next(), section = $(this).closest('.section'); section.animate({ scrollTop: section.scrollTop() + fuller.offset().top }, 700); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="section"> <a href=# class="scroller">Scroll</> <div class="section1"> <div class="section1">Content2</div> </div> <div class="section2"> <div class="half-screen"> <div class="s">Content 2</div> </div> </div> <div class="section3"> <span> <div class="">Content 3</div> </span> </div> <div class="section4"> <div class="half-screen"> <div class="s">Content 4</div> </div> </div> </div> 

This kind of code send me just to the section2 and then doesn't work.

Answer 1

You can use a counter to achieve your task. When the button is clicked, we check if counter hasn't reached the sections (those to be scrolled to) length (the number of the sections in the page), scroll to the next section and increment the counter otherwise scroll to the first section and assign 0 to the counter so we can click again and have the same functionality.

But before digging into the code (logic), I have some points to talk about :

• your HTML is semantically wrong : an inline level element (a span in your case) can't host block level elements (a div in your case).
• the button (the a.scroller element) is the only one component that has the scrolling functionality, select it (in jQuery ) based on it's ID (we'll give it one) seems more better than a class (that's faster as jQuery will use the native getElementByID to select the element, you can read the jQuery code and get how it does the selecting job).
• as I tried to say, classes are used to select more than one element in the page. The sections (to be scrolled to) should have a common class (also to be used in jQuery ).

So building on those points above, I prepared a demo example for you in which you can extend to achieve your desired end results. Also, the example has a wealth of helpful comments to help you when reading the code.

 $(() => { /** * select the main elements having affect in the process. * sections: the sections to be scrolled to. * btn: the "a" element that that triggers the scrolling effect. * idx: the counter that used to distinguish which section should we scroll to. **/ let sections = $('.scroll-to'), btn = $("#scroller"), idx = 1; /** adding the click listener to the "a" element **/ btn.on('click', e => { e.preventDefault(); /** preventing the jump to top (and adding "#" to the URL) **/ idx >= sections.length && (idx = 0); /** if the counter reaches the number of the section in the page we must decrement it to 0 **/ /** scroll effect: the "body" and the "html" elements should scroll not a section but the scroll destination is based on the section with the index "idx" offset from the top of the page (all the page not only the viewport) **/ $("html, body").animate({ scrollTop: $(sections[idx++]).offset().top }, 700); }); }); 

 /** basic styling for the demo purposes and to allow the scroll effect to be seen **/ .scroll-to { height: 100vh; border: 2px solid blue; } #scroller { position: fixed; top: 0; left: 50%; transform: translate3d(-50%, 0, 0); background-color: #000; color: #fff; padding: 8px 15px; border-radius: 0 0 4px 4px; text-align: center; box-shadow: 0 0 25px -1px rgba(18, 18, 18, .6); z-index: 999; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- no "span" elements having "div" ones which is semantically wrong --> <!-- the sections to be scrolled to have a common class "scroll-to" which will be used to select all these section in "jQuery" --> <!-- the "a" element now have an ID of "scroller" to select it rapidly with "jQuery" --> <div class="section"> <a href="#" id="scroller">Scroll</a> <div class="scroll-to fullscreen"> Some content </div> <div class="scroll-to section2"> <div class="half-screen"> <div class="s">Content 2</div> </div> </div> <div class="scroll-to section3"> Content 3 </div> <div class="scroll-to section4"> <div class="half-screen"> <div class="s">Content 4</div> </div> </div> </div> 

I'm here for any clarifications.

Hope I pushed you further.