How To Add Back To Top Button In Blogger

“How to Add Back to Top Button in Blogger” is a question from everyone new to the Blogger platform as this animation helps create a better user experience. This widget animation is straightforward to implement in bloggers, as small changes need to be made to the code. Scroll-to-top or back-to-top buttons are most generally an image or an icon placed on the bottom of a webpage that has long content that has to scroll down for a long time to read.

Let’s try to know how it works. Initially, the button will hide, when you scroll more than “100px”, a button will be shown at the right bottom of the browser screen and this is our “back to top button”. If you click on that button you will reach the starting point of the blog page. After that button will automatically hide. This sounds interesting. The demo is already available on this page, scroll more than “100px” and see at the right bottom of the screen. Otherwise, you can see a demo on our blogger.

In bloggers, this button will be very useful for the readers if the posts are so long, and after reading if they want to go to the top of your blog to go to the home page or to access the navigation bar of your website.

Steps to add Scroll to Top Button in Blogger

1. Go to Blogger Dashboard. Now go to the blogger dashboard.
2. Click On Layout Link. Click on the layout link.
3. Create HTML/Javascript Gadget. Please create a new gadget where we will paste HTML, CSS, and Jquery code.
4. Paste the “Back To Top” Code. Paste the code that you copied.
5. Save Layout. Now click on save.

<style>#sbtbacktotop{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDwqmQE7qoyRe9I54arI4O0vLGpw4vTo09WVEXKI6tS2q2o9tXSpaL2s537rWOVVXaTBQWn3zSuQvE4tXVZ2_83ixsZ-Wt3brzAEWF4iekWsqVG8dWW3qgvPx9G6Eyq9l3I6yKW1AHny0-/s1600/back-to-top-sprite-30224d9b.png) 0 0 no-repeat;height: 130px;width: 72px;padding:5px;position:fixed;bottom: 5px;right: 5px;cursor:pointer;transition:none;z-index:15;}#sbtbacktotop:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDwqmQE7qoyRe9I54arI4O0vLGpw4vTo09WVEXKI6tS2q2o9tXSpaL2s537rWOVVXaTBQWn3zSuQvE4tXVZ2_83ixsZ-Wt3brzAEWF4iekWsqVG8dWW3qgvPx9G6Eyq9l3I6yKW1AHny0-/s1600/back-to-top-sprite-30224d9b.png)no-repeat;background-position: 0 -142px;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/><script type='text/javascript'>//<![CDATA[$(window).scroll(function(){if($(this).scrollTop()>100){$("#sbtbacktotop").removeAttr("href");$("#sbtbacktotop").stop().animate({bottom:"0"},{duration:100,queue:false})}else{$("#sbtbacktotop").stop().animate({bottom:"30000"},{duration:8000,queue:false})}});$(function(){$("#sbtbacktotop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});//]]></script><!-- Code provided to you by seorunk.com --><a href='#' id='sbtbacktotop'></a>