Scroll with Jquery

Asked

Viewed 1,634 times

2

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?

  • 3

    In the future please put code in the question, so we can answer in detail to the problem you have.

  • Robson, the answers were correct to the problem you had?

4 answers

5

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/

  • I was going to answer almost the same :) http://jsfiddle.net/QaK3P/

  • @bfavaretto :) But by the way, add your answer because you use anchors and I don’t

1

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".

  • Hi, user8993, welcome to [en.so]. Check out the editor’s guide http://answall.com/editing-help, and read [Answer], it’s nice to explain because your code solves the problem. Compare with Sergio’s answer up there, he has that amount of points for some reason... ;)

  • Che, who upgrade cool! + 1+

0

Hi, you can use scrollTop in Jquery.

Try this (WORKING)

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

0

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>

Browser other questions tagged

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