-2

Eu tenho uma página com diversas <section> para cada bloco de conteúdo, como no exemplo abaixo:

<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>

E nessa página, no canto inferior direito, eu vou ter uma seta que vai ficar fixa flutuando sobre a tela. Ao clicar nessa seta, eu quero que a tela role para a próxima <section>, isso é possível utilizando JavaScript?

4
  • as sec ficarão ocultas? Commented 4/03/2020 às 16:33
  • @PedroHenrique não, cada section vai ocupar 100% do tamanho da tela. Commented 4/03/2020 às 16:38
  • Ele só avança, não volta? Commented 4/03/2020 às 16:40
  • Sim, só avança. Commented 4/03/2020 às 16:50

1 Resposta 1

1

É possível fazer usando um contador sectionAtual, nesse caso antes de realizar qualquer evento, fiz a contagem de quantas section existem na DOM, com isso fiz um evento de click na seta, nesse evento é feito uma verificação se existe uma próxima section para ir até ela, se não existir a aplicação é interrompida, caso exista, é feito um auto incremento na variável de contagem sectionAtual, que será usada para ir até a próxima section, que no caso recupero usando o método eq => $('section[id^=sec-]:eq(n)').

Ao voltar a página com scroll, será definido uma nova posição para a sectionAtual, caso esteja na section-C e volte para a section-B, não irá para a section-D, o contador será modificado e a próxima section será a section-C

Segue o exemplo:

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>


Referência:

eq()

animate()

Seletores

7
  • Ele funciona bem, porém tem dois bugs: o 1º é que aqui no meu ele tá pulando a primeira seção não sei pq. O 2º é que se eu usar a barra de rolagem para voltar para a seção anterior a seta não funciona mais. Commented 4/03/2020 às 17:04
  • 1
    Então, essa da barra de rolagem, não informasse na pergunta. Queres que ao voltar a barra de rolagem ele volte também a contagem das sections? Se eu estiver na section#C e voltar para a sectiob#B e clicar para ir para a próxima, tem que ir para a section#C novamente, não para a section#D , isso? Commented 4/03/2020 às 17:08
  • 1
    Entendi, só um momento, vou ajustar esse detalhe. Commented 4/03/2020 às 17:18
  • 1
    @MateusD. código alterado. Commented 4/03/2020 às 17:31
  • 1
    Reparei que aqui no S.O precisa de dois click, parece que o topo onde o resultado é exibido não é o topo real, existe algo entre o primeiro elemento e o topo, por isso no primeiro click ele vai até o elemento, repare que desce pouca dois da página e depois vai pra próxima section, bons estudos! Commented 4/03/2020 às 19:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .