Add Simple Scroll To Top Button With jQuery To Blogger

In this post I will give you a tutorial about adding the simple scroll to top button to your blog.Here I have used CSS and jQuery.When any visitor clicks on it the Scrolling Starts from bottom with a Certain speed and it Ends with Gradually Decreases the speed,this effect is looks more attractive.Now lets see how to add  this button to your blog.


How To Add Simple Scroll To Top Button To Blogger : 

• Go to Blogger Dashboard > Design > Edit HTML.
• Now find for tag </body> in your blog.
• Add below code just above/before </body> tag.

<style type="text/css">#hb-gotop{-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() {$("#hb-gotop").scrollToTop();});</script><a href='#' id='hb-gotop' style='display:none;'>Scroll to Top</a>

Change the wordings Scroll to Top if you wish to . 

I hope you liked the post . 

Please share it with your blogging friends. 

Follow @shipsocker

Stay Connected With Free Updates

Subscribe via Email