How to add a scroll to top button with jQuery

This script adds ability to scroll to an absolute position (from top of page) or just a specific element on the page instead. For pages that are long winded, it’s a good idea to provide your viewers with an easy way to quickly navigate up to the top of the page. Also allows you to set it’s visibility on a readers screen: on start, in between, or when a user scrolls to the bottom.

Click here to see the demo

1. Login into your Blogger dashboard > Layouts > Edit HTML

2. Insert the following section code below into your template right after the section code: ]]></b:skin>

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

<script type="text/javascript" src="scrolltopcontrol.js">
/*********************************************
* © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
*********************************************/
</script>

Note: The above references a “scrolltopcontrol.js” file plus a sample image: which you should download below (right click, and select "Save As")

3. Next, you will need to add the section code below right before the section code: <div id='header-wrapper'>

<a href="#top"></a>

4. Preview your template and if everything works fine, Save Template.

** Tutorial completed