The back to top button helps your reader to jump back to the top of your blog just by one click.Which makes it easier for your blog visitor to keep using your blog without any difficulty. Imagine a blog post consisting of 2000 words and a reader who just completed reading the post, now he wants to go back to the top of your blog, how long and frustrating it would be for him/her to keep scrolling all way back to the top.

Here comes the easy and quick solution by using very simple HTML and CSS coding. You can add this button to any blog (Blogger or WordPress).

How to add a Back To Top button to your blog

First of all, add this code in the <head> section of your template’s main HTML file to make sure your site is loading jQuery.

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

Note: If your blog theme already has a similar script then no need to add this script.

We will start with adding the CSS code. To add the following code given below in Blogger, go to Template > Customize > Advanced > CSS and past it there.

.back-to-top {
display:none;
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;

}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration:none;
color:#ffffff;
}

Now go to go to Template > Edit HTML and search for </body> and add the following code given below right above it.

<a href=”#” class=”back-to-top”>Back to Top</a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery(‘.back-to-top’).fadeIn(duration);
} else {
jQuery(‘.back-to-top’).fadeOut(duration);
}
});
jQuery(‘.back-to-top’).click(function(event) {
event.preventDefault();
jQuery(‘html, body’).animate({scrollTop: 0}, duration);
return false;
})
});
</script>

Finally, save your template. To check if its working opens your blog and scroll down till the end, you should be able to see the Back To Top button.

Conclusion

This post was about adding the Back To Top button on a blog which makes your blog user-friendly. User experience is the most important thing which is directly linked to the success of a blog. If a user finds it very easy to navigate and use your blog then he will spend more time on your blog which will not only lower your site bounce rate but also increase the revenue.
Feel free to ask a question regarding the post by leaving a comment below. If you think this post was helpful for you then please share it with others also thanks.