Are you thinking to add Scroll Back to Top button in your Blogspot or WordPress website? Great, if you want to do so, then you come to the right place, here I will show, How to add Scroll Back to Top Button in Blogger or WordPress.

But Why we need Scroll to Top button?

As we know that a lot of content required a reader to scroll gradually. But when the reader completely read the content, he/she wants to go back which makes reader sick. Adding Back to Top scroll button helps the readers to move back quickly with one-click function. The users can easily jump back to the header and can check more contents.

What Scroll button include:

This scroll button is made up of Javascript, HTML, and CSS. You can also say it jQuery Animation Scroll top. You can use this combined codes on any website or blog.

In this tutorial, I will give you the simple type of jQuery scroll to top button.

How to add Scroll Back to Top Button

Step 1: To add jQuery animate scroll top button in Blogspot, you need to go to the Template Editor. In the Editor add the given Google jQery script link in the template and save it.

In WordPress, add this link to the index page or main page.

If you have not linked Google Javascript liberty in you Blogspot or WordPress template, then add this code to your blog, under the <Head> section.

<script src=””></script>

Note: If this Javascript link is already available in your web template so, you do not need to add this one code.

Step 2: In Blogspot, open the Template HTML Editor and press Ctrl+F to open the search box. Now find </body> and add these Java and HTML code above it.

<a href=”#” class=”back-to-top”>Back to Top</a>


jQuery(document).ready(function() {

var offset = 220;

var duration = 500;

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > offset) {


} else {




jQuery(‘.back-to-top’).click(function(event) {


jQuery(‘html, body’).animate({scrollTop: 0}, duration);

return false;




Step 3: The last step is to add the style to this scroll button with simple CSS codes.In Blogspot go to  Template»Customization» Advance» Add CSS.

and paste the following CSS in it.

If you are using WordPress, then find Style.css file and paste these CSS codes in it.

.back-to-top {


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);



Now save the template and check it out.

If you have faced any problem with this tool, then feel free to drop a comment in the comment box.

About the author 

Muhammad Rizwan

I am Muhammad Rizwan, a student of BSCS, and a part-time blogger. My interest in computer and internet brought me to web development, and now I am working on this website. I love to share my opinions and review and to help peoples worldwide. My goal is to improve myself in blogging field and to make my website successful.

Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}