Simple vertical page scrolling with animation easing using jquery.

DEMO DOWNLOAD

How you do it

Start by loading the jquery library by inserting:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

between the head tag of your document. This code loads the jquery library straight from Google and we do this for caching purposes.

We also need to insert the jquery plugin that does the easing part (optional but animations with some kind of easing almost always look better)

<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Next we need to insert the actual function that does the trick of animating our document vertically when we click on a link. After the jquery scripts (still inside the head tag) insert:

<script type="text/javascript">
//scroll page to id
function Animate2id(id2Animate){
	var animSpeed=1500; //animation speed
	var easeType="easeInOutExpo"; //easing type
	if($.browser.webkit){ //webkit browsers do not support animate-html
		$("body").stop().animate({scrollTop: $(id2Animate).offset().top}, animSpeed, easeType);
	} else {
		$("html").stop().animate({scrollTop: $(id2Animate).offset().top}, animSpeed, easeType);
	}
}
</script>

This function gets the target id (the container id to scroll to), checks for webkit browsers (that do not support html animation) and animates the document with a nice easing effect that we define in easeType variable. Inside the function we also define the scrolling speed (var animSpeed) in milliseconds.

The css:

body{margin:0; padding:0; background:#fff;}
#menu{position:fixed; z-index: 2; top:10px; left:10px; clear:both; border:1px solid #666; padding:5px; background:#fff;}
#menu a{margin-left:5px; margin-right:5px;}
#c1, #c2, #c3, #c4, #c5 {height:1000px; margin:0 0 60px 0; background:#eee; padding:60px 10px;}

And finally our html code:

<div id="menu">
<a onclick="Animate2id('#c1');return false" href="#">Content 1</a>
<a onclick="Animate2id('#c2');return false" href="#">Content 2</a>
<a onclick="Animate2id('#c3');return false" href="#">Content 3</a>
<a onclick="Animate2id('#c4');return false" href="#">Content 4</a>
<a onclick="Animate2id('#c5');return false" href="#">Content 5</a>
</div>
<div id="content">
<div id="c1">Content 1</div>
<div id="c2">Content 2</div>
<div id="c3">Content 3</div>
<div id="c4">Content 4</div>
<div id="c5">Content 5</div>
</div>

We call Animate2id function with an onclick event attached to a link and send the id of the container we want to scroll to (much like a named anchor). We also insert return false to prevent browser’s default link actions.

You can use this little script to create a menu (like our example) that scrolls page to a desired content area (cool interface for a single page website) or just to make a fancy “back to top” footer link

Easy!