Scroll to the next Section

Asked

Viewed 169 times

0

My code is written as follows:

<body>
    <div id="arrow">
        <a class="next"></a>
        <a class="previous"></a>
     </div>

    <section id="primeiro">
    ...
    </section>

    <section id="segundo">
    ...
    </section>

    <section id="terceiro">
    ...
    </section>
</body>

The element #arrow possesses position: fixed, and by clicking on a.next, wanted him to go to section closer, so also for the a.previous, giving a kind of a scrollTo.

Ex: By clicking on a.next for the first time, he goes to the section#primeiro, The second time, he goes to section#segundo and so it goes...

I’ve tried several plugins in JS, but they all download my code.

Would anyone know how to solve this problem?

Thank you in advance!

javascript jquery rolling

1 answer

0

After a little bit of head-breaking I managed to make a script that is close to your needs. Having the following page:

#navegacao {
    padding:5px;
    border:1px solid #eaeaea;
    position:fixed;
    background-color:rgba(255, 255, 255, .9);
}

#navegacao a {
    display:block;
}
<div id="navegacao">
    <a href="#prev">Recuar</a>
    <a href="#next">Avançar</a>
</div>

<section id="primeiro" data-navegacao>
    <h2>Primeiro</h2>
Maecenas libero odio, vulputate ut sagittis at, maximus at nibh. Nam leo mi, aliquet ac vestibulum a, porttitor vulputate magna. Maecenas eget elementum nunc. Suspendisse ex urna, commodo et neque eget, pulvinar rutrum mauris. Cras maximus metus cursus, maximus arcu a, iaculis sem. Proin sapien ante, pulvinar ac velit quis, aliquet maximus ante. Nullam lobortis sem diam, et sollicitudin velit sodales sed. Cras tincidunt magna eget ipsum vestibulum, in suscipit purus venenatis. Curabitur malesuada faucibus odio, quis gravida justo porta eu. Integer pellentesque pulvinar lacinia. Cras ut rhoncus tortor. Duis et dapibus magna. Nulla porttitor felis sed risus mollis congue. Mauris commodo, risus quis dignissim volutpat, nisl metus rhoncus metus, quis eleifend orci enim eu nunc. Ut sodales interdum urna, eu molestie lectus rutrum in. Sed condimentum nisi in ex dignissim sodales.
</section>

<section id="segundo" data-navegacao>
    <h2>Segundo</h2>
Maecenas libero odio, vulputate ut sagittis at, maximus at nibh. Nam leo mi, aliquet ac vestibulum a, porttitor vulputate magna. Maecenas eget elementum nunc. Suspendisse ex urna, commodo et neque eget, pulvinar rutrum mauris. Cras maximus metus cursus, maximus arcu a, iaculis sem. Proin sapien ante, pulvinar ac velit quis, aliquet maximus ante. Nullam lobortis sem diam, et sollicitudin velit sodales sed. Cras tincidunt magna eget ipsum vestibulum, in suscipit purus venenatis. Curabitur malesuada faucibus odio, quis gravida justo porta eu. Integer pellentesque pulvinar lacinia. Cras ut rhoncus tortor. Duis et dapibus magna. Nulla porttitor felis sed risus mollis congue. Mauris commodo, risus quis dignissim volutpat, nisl metus rhoncus metus, quis eleifend orci enim eu nunc. Ut sodales interdum urna, eu molestie lectus rutrum in. Sed condimentum nisi in ex dignissim sodales.
</section>

<section id="terceiro" data-navegacao>
    <h2>Terceiro</h2>
Maecenas libero odio, vulputate ut sagittis at, maximus at nibh. Nam leo mi, aliquet ac vestibulum a, porttitor vulputate magna. Maecenas eget elementum nunc. Suspendisse ex urna, commodo et neque eget, pulvinar rutrum mauris. Cras maximus metus cursus, maximus arcu a, iaculis sem. Proin sapien ante, pulvinar ac velit quis, aliquet maximus ante. Nullam lobortis sem diam, et sollicitudin velit sodales sed. Cras tincidunt magna eget ipsum vestibulum, in suscipit purus venenatis. Curabitur malesuada faucibus odio, quis gravida justo porta eu. Integer pellentesque pulvinar lacinia. Cras ut rhoncus tortor. Duis et dapibus magna. Nulla porttitor felis sed risus mollis congue. Mauris commodo, risus quis dignissim volutpat, nisl metus rhoncus metus, quis eleifend orci enim eu nunc. Ut sodales interdum urna, eu molestie lectus rutrum in. Sed condimentum nisi in ex dignissim sodales.
</section>

Note that in sections I put the property data-navegacao, this is to select only the sections which should be included in the script (if you have one that should not be used). Explaining in detail the script would be dull, so I commented almost every line for you to take a look at it.

Script:

$(function() {
    // Define o primeiro elemento
    var $last_element = $($('section[data-navegacao]')[0]);

    // Quando a janela rolar...
    $(window).scroll(function() {
        // Declara a variável para o 'offset' do último elemento
        var last_top = $last_element.offset().top;
        // Declara a variável para o 'offset' da janela
        var w_top = $(window).scrollTop();

        // Percorre todas as 'sections' includias no script
        $('section[data-navegacao]').each(function() {
            // Declara a variável para o 'offset' do elemento atual
            var this_top = $(this).offset().top;
            // Se a janela passou por esse elemento, então este é o "último"
            if (w_top - this_top > 0) {
                // Define o elemento atual sendo o último
                $last_element = $(this);
            }
        });
    });

    // Quando clicar em um dos links do menu...
    $('#navegacao > a').click(function() {
        // Declara a variável para o 'offset' da janela
        var topo = $(window).scrollTop();
        // Se o link for para avançar...
        if ($(this).attr('href') == '#next') {
            // Percorre todas as 'sections' includias no script
            $('section[data-navegacao]').each(function() {
                // Declara a variável para o 'offset' do elemento atual
                var elemento_topo = $(this).offset().top;
                // Se a subtração de 'elemento_topo' com 'topo' for maior que 0, significa que o elemento atual é o próximo
                if (parseInt(elemento_topo - topo) > 0) {
                    // Move o usuário para o elemento
                    $('html, body').animate({
                        scrollTop: elemento_topo
                    }, 1000);
                    return false;
                };
            });
            // Se o link não é para avançar, verifica se é para voltar
        } else if ($(this).attr('href') == '#prev') {
            // Move o usuário de volta para o último elemento
            $('html, body').animate({
                scrollTop: $last_element.offset().top
            }, 1000);
            return false;
        };
        return false;
    });
});

Example in Jsfiddle: http://jsfiddle.net/85ra9g3c/

Browser other questions tagged javascript jquery rolling

You are not signed in. Login or sign up in order to post.