How do I click on the menu, it scrolls the page until the div conrespondente?

Asked

Viewed 422 times

0

I have a menu with a class named 'whoSomos' and I have a div with id 'whoSomos', I want to click the menu, it scrolls to this div whoSomos, I even tried to do it with html but it rolls in a very rough way, I wanted it to be smooth, someone can help me ?

jquery

1 answer

3

You need to know the position of the element with the ID, and then you can use the .animate() jQuery to do this.

A simple example would be like this:

$('nav li').click(function() {
    var pos = $('#' + this.dataset.id).position().top;
    $('html, body').animate({
        scrollTop: pos
    }, 1000);
});

Example: https://jsfiddle.net/cqbfnsce/

In the example use <li data-id="quemSomos">Quem somos</li>, so I look for the element with $('#' + this.dataset.id) but if you have ID elsewhere in that menu you may need to change this selector.

Browser other questions tagged jquery

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