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.