How to Add Smooth Scrolling Back To Top Button To Your Blogger Blog

              Back to top buttons are very helpful on blogs and websites. Moreover, you will be overwhelmed if the button does a nice scrolling animation when the page goes up. Such buttons are called smooth scrolling buttons. So here's a tutorial of how to implement a smooth scrolling back to top  button on your blog.

Steps to implement:

1. Go to your blogger dashboard >> Template >> Edit HTML.

2. Press Ctrl + F and find the following piece of code:

]]></b:skin>

3. Copy the following code and paste it directly above/before ]]></b:skin>

#techsum4u{
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
}

4. Find the </head> tag and paste the following code directly above/before the closing </head> tag.

<!-- Code Starting>
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#techsum4u').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

<!-- Code End>

  5. You're almost done. Now just find the closing </body> tag and paste the following code directly above/before </body>

<a href="#" id="techsum4u"><img src="URL of Image" alt="Back To Top" title="Back To Top" /></a>

6. Replace the part highlighted in blue with the URL given below 
 

Collection of Back to Top buttons.
To get URL of the image, Right click on the image and copy the URL

Collection of Back to Top buttons.

7. Hit Save template and you're done! Enjoy clicking on your new smooth scrolling back to top button!

To get new updates Like us on FaceBook