Scroll with Jquery

You need to have in the menu some indication of the target for the scroll.

Can be id of element saved in a data property, one href / anchor, or another. If you use an anchor ( <a> ) you may need to use .preventDefault() to prevent the link from being followed (in some cases you even want the link to be in the url, then you should not use).

After you have to intercept the click, you can use the jquery .anymate () to scroll, and get the position of that element as a target.

HTML example

<div class="menu">
    <div data-destino="parte1">Parte 1</div>
    <div data-destino="parte2">Parte 2</div>
</div>
<div id="parte1"></div>
<div id="parte2"></div>

Example of jQuery

$('.menu div').on('click', function () {
    var destino = '#' + $(this).data('destino');
    var posicaoDestino = $(destino).position().top;
    $('html, body').stop().animate({
        scrollTop: posicaoDestino
    }, 2000);
});

Example: link

Using href of links:

<a href="#Id_da_div"> link </a>

Ex:

<a href="#contato">Fale Conosco</a>
<script>
$('a[href*=#]').click(function() {
    var destino = $(this).attr('href');
    $("html, body").animate({scrollTop: $(destino).position().top}, 600);
    return false;
});
</script>

To change the scroll speed, change the last parameter from 600 to the desired value. The value is in milliseconds, or "slow" , "mid" , "fast" .

Hi, you can use the scrollTop in JQuery.

Try this (RUNNING)

$("#elemento1").click(function(){
    $('html, body').animate({ 'scrollTop' : $("#elemento2").position().top }, 1);
});

You can use ANCHOR.

Link to be clicked

<a href="#vemPraCa">Clique aqui para dar Scroll</a>

Location where Scroll goes

<a name="vemPraCa"></a>