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.

33 Comments

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!

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

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

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.

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!

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.

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.?

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!

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.. 🙂