How to Add Back To Top Button In Blogger

For now I am going to share back to top button for blogger. It is useful widget which enables blog readers to go back to top after browsing through number of some posts on your blogger blog rather than scrolling manually as it also takes time and ofcourse bad impression to blog readers.

DEMO DISPLAY:

Add a Back To Top button to your blogger site:

• To get started, add this to the CSS section of your site. In Blogger, this would be under blogger>Template>Edit HTML> and past the given code just before  ]]></b:skin>.

.back-to-top{ bottom: 2em;
 color: #fff;
 display: none;
 opacity:0.6;
 padding: 1.5em;
 position: fixed;
 right: 1.5em;
 text-decoration: none;
}
.back-to-top:hover{
 opacity:1;
 transition:1s;
}

After adding css code for back to top buttons. Save template and your done with CSS.

• In this step you will have to add jQuery to your blogger blog. To make sure your site is loading jQuery. Add this code in the </head> section.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

• Next, add the following code directly before the </body> code in your template’s main HTML file. In Blogger, go to Template > Edit HTML and search for and add this above it:

<a class="back-to-top" href="https://www.blogger.com/blogger.g?blogID=8402326634669559549#">↑</a> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() &gt; offset) { jQuery(&#39;.back-to-top&#39;).fadeIn(duration); } else { jQuery(&#39;.back-to-top&#39;).fadeOut(duration); } }); jQuery(&#39;.back-to-top&#39;).click(function(event) { event.preventDefault(); jQuery(&#39;html, body&#39;).animate({scrollTop: 0}, duration); return false; }) }); </script>

 Now save your template you should see the Back to Top link appear as you scroll down the page in your blogger blog. If you have any problem installing back to top buttons ask your questions in comments. Thanks!