How do I click the menu, scroll the page to the corresponding div?

Question

How do I click the menu, scroll the page to the corresponding div?

Navigation

#1 by (3 votes)

0

I have a menu with a class named 'Who We Are' and I have a div with 'Who We Are' id, I want it to click on the menu, it scrolls to this div We are, I even tried to do this with html but it scrolls very gross way, I wanted it to be smooth, can anyone help me?

jquery

asked by anonymous 29.04.2016 / 23:35

1 answer

Swift - how to find out the size of JSON? jquery function does not work

score 3 · Answer 1

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

A simple example would look like this:

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

Example: link

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