How to install a Scroll To Top button on Blogger

Some custom blogger templates come without a Back to Top button installed on the already-made design. So here, I will show you how to install a scroll to top button on blogger.

Let's get to duty on how to install a scroll to top button on blogger blog.

1. Log on to your Blogger blog, go to Template > Edit HTML > search for the <head>  just below/after the <head>  tag place this bit of code:

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

Note: In case you already have a jquery script in your blog’s template, possibly for something to do with Pinterest – take a look at the first few lines of code to determine if you already have it – if you do there is no need to add it again… skip ahead to step 2.

Save the template.

2. Now go to Layout > click Add a Gadget > select an HTML/Javascript > copy and paste the code below into the content section:


<!--Allbloggingmag Back to Top Button Start-->
<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>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig33JhDMq-T2ZYEvhahfWUCO2EaUx_JbK7vrRYdle3gPg2kGCcAhEkbeR4TGq3mo3IcDgjRERxuAZH7moYV5beKJOsYfzDHqUFirB1jslHUYQoI9EvF8IFlJ8WHhLNoUjBCELYOOmyFpvt/s1600/backtotop.png" alt="Back to Top" / ></a>
<!--Allbloggingmag Back to Top Button End-->


You can either use my default “back to top” button, which is the URL highlighted in red, or you can replace it with your own.

Finally, Click The Save button.

Happy blogging!



Have any questions? Feel free to ask me via the comments section! Remember to share this tutorial with others on Facebook, Twitter & Google Plus.