How to Add Animated Back to Top Button in Blogger

I suppose you might have seen stylish and animated Back to Top button in several websites and blogs. In this tutorial I'll show you how to implement one in your Blogger Blog. It will look alike as in my blog. You can change the code and make it stylish according to the theme of your blog.

Step 1
Go to Blogger Dashboard. Select your blog and click on Template → Edit HTML.

Step 2
Now, press Ctrl + F and search for </head> tag.

Add the following code before it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<style>
.back-top {
    background: #FFFFFF; // background color of Back to Top Button
    color: #fff;
    font: bold 24px/100% &quot;Times New Roman&quot;, Times, serif;
    width: 30px;
    height: 30px;
    padding-top: 4px;
    margin-bottom: 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    zoom: 1;
    border-radius: 10em;
    border-style:solid;
    border-width:medium;
    border-color:#000000
    box-shadow: 0 2px 0 rgba(0,0,0,.1);
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;  // duration of animation
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-top').fadeIn(duration);
        } else {
            jQuery('.back-top').fadeOut(duration);
        }
    });
    jQuery('.back-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Step 3
Now find </body> tag. 

Copy the following code and paste before it.

<center>
<a class='back-top' href='#header'>⇡</a> // symbol indicating Back to Top
</center>

Step 4
Now Save Template.