How to get a smooth "scroll to top" button in blogger

We see scroll to top button on many websites and blogs. They give easier access to the viewer and a good look to your blog. Getting a smooth scroll to top button is really easy. I am using the word smooth because there are two kinds of scroll to top button are available- one which takes the viewer to the top at one go and the other which goes up smoothly.

You can see a similar button to the bottom right of this blog. Click on that for a live demo.

Steps to get a cool scroll to top button:--

• Click on Layout in your blog.
• Click on add a gadget and choose Html/java script for the window that will open.
• Leave the title blank and copy the following code in the content section.

< !Scroll to top code by sanship.co.cc starts here>

< style type="text/css">#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}</style><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script type='text/javascript'>$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});$(function(){$("#w2b-StoTop").scrollToTop()});</script><a href='#' id='w2b-stotop' style='display:none;'>Scroll to Top</a><br />

< !Scroll to top code by sanship.co.cc ends here>

• Click on save. The window will be closed. Then click on save arrangement
• View your blog and it should have a cool scroll to top button on its bottom left

TIPS:

• To change the words scroll to top you can alter the "Scroll to Top" written in the second last line of the code.
• To change the position of the button change its position in the 5th line of the code. (right by default)

Hit the like button if you like this post and follow me on twitter and facebook.

Leave any queries in the comments. If the chat with admins is online you can chat with me to solve any problem.

for more cool tricks and tips keep visiting http://ptmarocts.blogspot.com

 (best wishes)

vishnu bajpai