Add a “Scroll Back to Top” button to Blogger

A “back to top” button can be really helpful for your readers, especially if you have a lot of posts appearing on your homepage and no sticky navigation. This post will show you how to add one that will only appear when the user begins to scroll down your blog. An example can be seen on my personal blog here.

1. How to add a “back to top” button to blogger

1.1. Go to Layout > Add gadget > Add HTML/Javascript Gadget and paste the following into the content section

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});

jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

<a href="#" class="backtotop">Back to Top</a>

1.2. Now go to Template > Edit HTML and find ]]></b:skin>. If you can’t find it check out this post for help. Once you have found it paste the following above it

.backtotop {
position: fixed;
bottom: 10px; /* increase value to move position up */
right: 0px; /* increase value to move position left */
color: #000000; /* color of text */
background-color: #ffffff; /* background color of button */ 
font-size: 12px; /* changes size of text */ 
padding: 10px; /* add space around the text */
text-transform: uppercase; /* change text to all caps */ 
letter-spacing: 1.0px; /* space between letters */
}

.backtotop:hover {
background-color: #333333; /* color of background on hover over */
color: #ffffff; /* color of text on hover over */
text-decoration: none; /* no underline */
}

1.3. Change what is shown in pink to suit your blog. The /* ... */ are comments to help you identify the code. You can leave them in, they won’t appear on your blog.

2. How to add a “back to top” image button to blogger

2.1. Go to Layout > Add gadget > Add HTML/Javascript Gadget and paste the following into the content section

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});

jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

<a href="#" class="backtotop"><img src="DIRECT IMAGE URL" alt="Back To Top"></a>

and add the URL of the image, make sure it’s the image URL and not the page URL!

2.2. Now go to Template > Edit HTML and find ]]></b:skin>. If you can’t find it check out this post for help. Once you have found it paste the following above it

.backtotop {
position: fixed;
bottom: 10px; /* increase value to move position up */
right: 0px; /* increase value to move position left */
color: #000000; /* color of text */
background-color: #ffffff; /* background color of button */ 
font-size: 12px; /* changes size of text */ 
padding: 10px; /* add space around the text */
text-transform: uppercase; /* change text to all caps */ 
letter-spacing: 1.0px; /* space between letters */
}

.backtotop:hover {
background-color: #333333; /* color of background on hover over */
color: #ffffff; /* color of text on hover over */
text-decoration: none; /* no underline */
bottom: 10px; /* increase value to move position up */
right: 0px; /* increase value to move position left */
padding: 10px; /* add space around the text */
}

2.3. Change what is shown in pink to suit your blog. The /* ... */ are comments to help you identify the code. You can leave them in, they won’t appear on your blog.

Post last updated:

33 responses to “Add a “Scroll Back to Top” button to Blogger”

  1. Marianne Manthey

    Oh very handy! I’ve shared it with my readers as many of them are on Blogger!

    1. Thank you so much Marianne, you’re a sweetheart!

      1. You know I finally just read your about page and it’s funny: My cousin is Belgian but living in Dublin. ๐Ÿ™‚

        1. No way! That’s pretty crazy. I’m actually back in Dublin as of the other day ๐Ÿ™‚

          1. Ooh nice! For good or just a visit?

          2. It was supposed to just be a visit but unfortunately something came up and we’ve had to stay. Really disappointed but “everything happens for a reason” I guess, we’re hoping to go somewhere else next year!

          3. oh i’m sorry to hear that. but i hope that just means a better opportunity is in the works ๐Ÿ™‚

          4. We hope so too, thank you ๐Ÿ™‚

  2. Natalie

    Thank you girl! It worked like a charm ๐Ÿ™‚

  3. Hey Elaine!

    First of all: Thank you for this tutorial!
    I really like this button but did you see that it also shows up when the page is loaded and I didn’t scroll at all?
    It appears although I am right at the top of the page. I also saw it on your blog.
    Maybe you know how to fix this?

    Thanks and have a great week.

    JANA

    1. On larger screens it will appear on loading, you can increase the var offset value to change how far down the trigger will be.

      1. Thank you very much. : )

  4. Thanks, this worked for me ๐Ÿ™‚

  5. Hi Elaine!

    Thankyou for this tutorial. I was just wondering, would I be able to add this to my sticky navigation bar? I have been designing on a test blog and have made a navigation bar with a home button and when you click on it I want it to take you back to the top.

    Thankyou,

    Sophie x

    1. Hello Sophie, yes you can! In step 1.1 add the script part of the code to your template then add the link (the last line of the code) to your navigation. You shouldn’t need to add any CSS (step 1.2) as the link will pick up your navigations style instead.

      1. Thankyou so much Elaine! It worked perfectly x

  6. Elaine, thanks for sharing this vital information… I’m very grateful….It really worked for me

  7. Hi Admin!
    Thanks and that image back to top button is just awesome. i really like it and added to my blog.
    Thanx again for your amazing posts

  8. Thanks. This is what i’ve been looking for.

  9. Hello,

    I’m having trouble getting the button to work on my blog. I have followed your instructions, but the button will not position where I would like. Is there a way you can check to make sure I am placing it in the correct space? Thank-you for your help!

    1. Hello Nicole. Have a look to see if you already have a version of jquery.min.js installed, which might be conflicting. There’s also some errors in your CSS which might be blocking the positioning CSS from being read correctly.

  10. Rahul Kumar

    Thanks for this one, ๐Ÿ˜‰ and hey can you please suggest any tutorial for “IMPORTANT TO NOTE (CLICK TO READ) ” like the one in your blog for blogger.?

    1. Hello, thank you! You can see the documentation (including an example / tutorial) on this page and this page.

  11. Claudine

    Hi! I have a question. Where do I place the HTML/Javascript gadget? Because I placed it below the blog post but then the image stays there. Thanks!

    1. Hello. You can place it in the sidebar or footer, double check your CSS for errors to make sure it’s being read correctly ๐Ÿ™‚

  12. It works, thans a lot !

  13. Oyon

    Hi Elaine. Thanks a lot for this tutorial. Works great! And I have been following your blog for quite a while now. Lots of great tutorials for beginners like me. Thanks.. ๐Ÿ™‚

    1. Thanks Oyon! Lots more content coming soon ๐Ÿ™‚

  14. I love your website!!!! and thank you for helping bloggers like me to customize our blogs :))))

  15. Oh, Yay!! Thank you so much! This is very helpful. I made it successfully.

  16. thanks you very much.

  17. It Works…. Thank you

  18. Great Sir. It helped me a lot.

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up youโ€™ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.