How can I make a menu that makes the browser window slide to a div?

Question

Ok, so here is the effect I am attempting to emulate:

http://www.lukestevenson.me/

http://sohacks.com/

Notice how when a menu item is clicked on, the menu slides to the appropriate div. How can I do this with my menu? My website is at willowlake.github.io .

Thanks.

EDIT : Thanks guys! Don't waste any more of your time on this simpleton question, it has been answered in depth.

Answer 1

Add this to your script and you will be able to get the effect.

$('#idOfYourMenuItem').click(function(){
    $('html, body').animate({ scrollTop: $('#idOfYourDiv').offset().top });
});

Answer 2

Take a look at this:

How can I make a DIV slide in and out?

Answer 3

Use this

Tiny Scrolling is a small script dedicated to support the navigation between the internal links and their destinations. It replace that annoying and confusing jump from various part of a page with a smooth scroll of the page itself.

Download the script (.js)

Tiny Scrolling