In my previous post I mentioned that I’ll be sharing a nice tutorial about creating an animated top button for your web pages. To view a demo of the code you can scroll a bit down and click on the up arrow image on the bottom right of the page.

Now you know what its all about, so here’s the code

You would need to call jQuery script for this code to work, so add the following code within the HEAD tags of your web page.

Load jQuery

This will load jQuery library on to your page directly from google servers so you don’t have to save or include the file on your server.

jQuery Code

You can save this code in a separate .js file (without the <script> </script> tags ofcourse) and call the file within the HEAD tags or simply include the above code anywhere in your HTML code.

If you would like to use some different class name, change “scroll” with your desired name. To change the speed of the scroll you can update 1000 with any number you want.

1000 is equal to 1 second, so for example if you want the scroll to happen in 3 seconds, update 1000 with 3000.

HTML Code

Top

In your html code you can specify the ID you want this link to scroll to. The HTML tag with the ID can be above or below the link. Make sure you specify the class name “scroll” (or whatever you have specified in jQuery) for this link to run the scroll function.

Demo Links for this page

Take me to the footer | Take me to the top | Take me to the content section

That’s It! Play around with this code and you will get the idea.

I would love to see what you’ve come up with so share your pages in the comments..