jQuery is a javascript library developed to make adding effects to websites very simple. A very popular option that you will find on websites is a link at the bottom of a page that says "top." When you click it, it will bring you to the top of the page very quickly. We can use jQuery to spice up this action my making the page scroll smoothly back to the top.

First you will need to have the main jQuery file downloaded and in the proper folder (in the example below jquery.js is in the root directory). You can download jQuery here.

Assuming that you already have a HTML file to modify, add this line of code within the tags.

<script src='/jquery.js' type='text/javascript'></script>

This is the jQuery file you just downloaded.

Here's a link for bringing users to the top of the page.

<a class='top'>TOP</a>

This will most likely be one of the last lines of code before your tag.

Now for the excitement, the jQuery code

<script>
$(document).ready(function()
{
 $('.top').click(function()
 {
   $('html, body').animate(
   {
     scrollTop: 0
   }, 1500);
 });
});
</script>

Put this whole snippet within the tags. The 1500 value in the animate() function tells the code how fast to occur (in milliseconds). Here the page will scroll to the top in 1500 milliseconds, or 1.5 seconds. Change this value as you see fit.

That's it! Now when a user clicks on the 'TOP' link at the bottom of a page, jQuery will smoothly scroll the page back up to the top.

Live demo here