Scroll with Jquery

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

Can be the id of the element stored in a property data, an href/ancora, 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 stay in the url, so you shouldn't use it).

After you have to intercept the click you can use jQuery .anymate () to scroll, fetching the position of this element as 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>

JQuery example

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

Example: http://jsfiddle.net/zc966/

Using the href of the 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 speed of the scroll, change the last parameter from 600 to the desired value. The value is in milliseconds, or "slow", "mid", "fast".

Hi, you can use scrollTop in JQuery.

Try This (working)

$("#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>

Place where the Scroll goes

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