Add A Floating Scroll To Top Button.

At first What is Scroll to Top Button?

Scroll to top button is the link that scroll the page automatically to top part when it is clicked.

You can see the demo at this page.Click it once you will notice that you are sent back to top part of Blog.You can added the button similar to mine.Just you need to add some code in your HTML.If you have a long page the reader will have easy to get top part of Blog.Scroll to Top Button is also know as back to Top Button.Lets do it.

Adding Scroll to top button

1. Go to Blogger.com
2. Click on design or template then go to Edit HTML
3. Find </body> and add this code just after it.
4. If you want to use image for Scroll to Top button then add this

   <!-- scroll to top button end -->
   <a href='#' id='br-scrolltotop'><img alt='Scroll to top' src='Image-URl'/></a>  
   <!-- Bloggerrounder.blogspot.com -->
   <!--  scroll to top button end -->
   

   
   Replace Image-URl in line 2 with the direct link of Scroll to top Image

5. If you want to use text for Scroll to Top button then add this.

   <a id="br-scrolltotop" href="#" title="Click to go to top">Scroll To Top</a>

   You can change Scroll to Top with your Choice.

Making Scroll to Top Button Float.

1. To make Scroll to top button float we need to add simple CSS.To make easy I have added it with steps.
2. Find ]]></b:skin> and add the following code just above it.

   #br-scrolltotop {
       position:fixed; 
        bottom:5px;
        right:5px;
   }
   

3. You can change right to left in line 4 to make it float left.

Adding Animated effect on Scroll to Top Button.

To add animated affect in Scroll to Top Button add the following code just above </head> tag(In Template HTML editor)

<!-- Adding Animated Effect Scroll To Top Button-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$(&#39;#br-scrolltotop&#39;).click(function(e){
e.preventDefault();
$(&#39;html, body&#39;).animate({scrollTop:0}, &#39;slow&#39;);
});
});
&lt;/script&gt;
<!-- bloggerrounder.blogspot.com -->

If you have any problem please comment.Bye

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.