Add Scroll Back to Top Button to Blogger

A scroll to top button in blogger is really helpful for readers if your blog has lots of posts on homepage plus comments on post page and if there is no sticky navigation plugin. In this post we are going to show you how to add back to top button which will appear when users scroll down reading your post.

Before Editing Backup Template

Always create a backup of your template before editing CSS or HTML in blog.

Adding Scroll To Top Button To Blogger

1. Go to Blogger > Layout > Add Gadget > Add HTML/Javascript Gadget now copy and paste the below code inside it.

<script type="text/javascript">
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.tnb-back-to-top').fadeIn(duration);
} else { //thenextblogs.blogspot.com
jQuery('.tnb-back-to-top').fadeOut(duration);
}
});
jQuery('.tnb-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

2. Next step got to Template > Edit HTML and find ]]></b:skin> tag. Once found paste the below code above it.

.tnb-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}

3. Now lets add the HTML tag in which you can use image or text for this go back to gadget part and paste the code.

<a href="#" class="tnb-back-to-top"><img src="IMAGE URL"alt="Back To Top"></a>

Now add the image url or replace with text and save template.