Scroll with Jquery

Question

I am creating a site, and I want to make a scroll effect on the pages where when clicking on the menu item the page scrolls to where this related information.

It would be more or less equal to this, but a little simpler just with the same scrolling.

Could someone help me?

Answer 1

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

Could be the id of the widget stored in a property data, a href/anchor or other. If using an anchor (<a>) may need to use the .preventDefault() to prevent the link from being followed (in some cases you even want the link to be in the url, so you should not use).

Then you have to intercept the click you can use jQuery . anymate() to scroll, going to get the position of this element as a target.

Example of HTML

<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: http://jsfiddle.net/zc966/

Answer 2

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 of 600 to the desired value. The value is in milliseconds, or "slow", "mid", "fast".

Answer 3

Hi, you can use scrollTop in Jquery.

Try this (WORKING)

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

Answer 4

You can use ANCHOR.

Link to be clicked

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

Where the Scroll goes

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