Scroll to the next section

Navigation
0

My code is written like this: 

<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 has position: fixed , and when you click on a.next , you want it to go to the section closest, so also to a.previous , giving a type of scrollTo .

Ex: When you click on a.next for the first time, it goes to section#primeiro , the second time, goes to section#segundo and so on ...

I've tried several plugins in JS, but they all bug my code.

Would anyone know how to solve this problem?

Thank you in advance!

    
asked by anonymous 21.04.2015 / 00:59

1 answer

0

After a little break, I was able to make a script that approximates 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>

Notice that in sections I put the data-navegacao property, this is to select only the sections that should be included in the script (in case 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: link

    
21.04.2015 / 03:26
Position dynamically created table with DIV Save variable value javascipt in the database