Add Smooth 'Scroll To Top' Button in Blogger

If you have very very long posts, after reading you post that will very boring to reach to top of the site. So adding a Back top top button in your Blogger site is very useful to your visitors. You can add two type of Back to top button to reach top of the page Static back to top buttons and Smooth scroll to top buttons. Static buttons are boring so add a Smooth scroll to top button (powered by jQuery) in your Blogger what generates very cool looking effect for reaching top of the site.

How to add Smooth 'Scroll To Top' button in Blogger: Smooth Back to top button setup has three steps:

Step 1: Add the jquery

First, Log in to Blogger, select your Blog,
Go to 'Template' tab, Select ' Edit Html'
Search (using Ctrl+F or Cmd+F) into code snippet <head>
Paste this Phrase under <head>

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

Save template.

Step 2: Install it

Go to 'Layout' tab, select 'add a gadget',
Select 'html/javascript' than copy and paste the following codes in content box

 <style>  
 .ks-back-to-top {  
   position: fixed;  
   bottom: 2em;  
   right: 15px;  
   text-decoration: none;  
   padding: 1em;  
   display: none;  
   cursor:pointer;  
 }  
 </style>  
 <img class="ks-back-to-top" src="Image Url" />  
 <script type="text/javascript">  
 /*****techtrickcorner.blogspot.com/***/  
 jQuery(document).ready(function() {  
   var offset = 220;  
   var duration = 500;  
   jQuery(window).scroll(function() {  
     if (jQuery(this).scrollTop() > offset) {  
       jQuery('.ks-back-to-top').fadeIn(duration);  
     } else { //https://techtrickcorner.blogspot.com/  
       jQuery('.ks-back-to-top').fadeOut(duration);  
     }  
   });  
   jQuery('.ks-back-to-top').click(function(event) {  
     event.preventDefault();  
     jQuery('html, body').animate({scrollTop: 0}, duration);  
     return false;  
   })  
 });  
 </script>

Step 3: Install the Button