How to create a button with Javascript, which when clicking it advances to the next section?

Question

I have a page with several <section> for each block of content, as in the example below:

<style>
     section {
        width: 100%;
        height: 100vh;
     }

     .seta {
        position: fixed;
        bottom: 0;
        right: 30px;
        color: #000;
        font-size: 72px;
        cursor: pointer;
     }
</style>

<section id="sec-a">
   ...
</section>

<section id="sec-b">
   ...
</section>

<section id="sec-c">
   ...
</section>

<section id="sec-d">
   ...
</section>

<div class="seta">
^
</div>

And on this page, at the bottom right, I’m going to have an arrow that will stay fixed floating over the screen. By clicking this arrow, I want the screen to scroll to the next <section>, this is possible using Javascript?

Answer 1

It is possible to do using a counter sectionAtual, in this case before performing any event, I counted how many section exist in the DOM, with this I made an event click on the arrow, in that event a check is made if there is a next Section to go to it, if there is no application is stopped, if there is an auto increment in the counting variable sectionAtual, which will be used to go up to the next Section, which in case I recover using the method eq => $('section[id^=sec-]:eq(n)').

When scrolling back, a new position will be set for the sectionAtual, if you’re in section-C and go back to the section-B, will not go to the section-D, the counter will be modified and the next Section will be the section-C

Follow the example:

const quantidadeSections = $("section[id^=sec-]").length; // Quantidade de sections na DOM
let sectionAtual = -1; // Contador de section
let arraySections = []; // Array com posições das sections na DOM

// Recupera posição das sections
setTimeout(() => {
    $("section[id^=sec-]").each(function(){
        arraySections.push($(this).position().top)
    });
}, 1000);


// Evento de click na seta
$('.seta').click(function(){
    // Verifica se é a ultima section
    if((sectionAtual + 1) === quantidadeSections) return false;

    sectionAtual++;
    $('html,body').animate({
        scrollTop: $(`section[id^=sec-]:eq(${sectionAtual})`).offset().top
    }, 'slow');
});

// Evento ao rolar a scroll
$(document).scroll(function () { // oscultador de scroll
    const posicaoScroll = $(document).scrollTop(); // obtem a quantidade de scroll no momento
    for (let countSec = 0; countSec < quantidadeSections; countSec++) {
        
        if(posicaoScroll >= arraySections[countSec]) sectionAtual = countSec;
        
    }
})

section {
    width: 100%;
    height: 100vh;
}

.seta {
    position: fixed;
    bottom: 0;
    right: 30px;
    color: #000;
    font-size: 72px;
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="sec-a">
    SECTION A
</section>

<section id="sec-b">
    SECTION B
</section>

<section id="sec-c">
    SECTION C
</section>

<section id="sec-d">
    SECTION D
</section>

<div class="seta">
    ^
</div>

---

Reference:

eq()

Animate()

Selectors