Onclick menu button, website scrolls to div

Question

I'm making a personal portfolio in an infinte scroll website. Right now I have 4 divs (home, bio, work and contact). I have an header with a menu with 4 names, same as divs. So what I want to do is to have a trigger when I'm at the div "Home" and click on the menu "Work" I want the browser to scroll down to the third div whick is "Work". Hope I make myself clear :)

Solution 1

For something really basic use this:

<a href="#work">Work</a>

or you can try jQuery plugin ScrollTo

Working Fiddle

Solution 2

If your Work section have a id, for instance work you can do it with:

$('html, body').animate({scrollTop: $("#work").offset().top}, 2000);

with some smooth animation

Comments

[Admin]

that code just opens a blank page. About the ScrollTo plugin, I have no clue how to use it.

[Jatin]

it doesn't open a blank page. It scrolls down to that page.

[Jatin]

For complete example You can hav a look at insitedesignlab.com/how-to-make-a-single-page-website

[Admin]

It's working thank you, I'm new so, I messed up with the tags, now I just need an animation.

[Admin]

Where do I paste this?!

[Jatin]

Glad that i could help you.

[Admin]

do you know how to make the animation that pna posted?

[Jatin]

Are you talking about smooth scroll if yes then refer insitedesignlab.com/how-to-make-a-single-page-website

[Jatin]

Thats Nice...All Good Np :)