Smooth Scrolling "Back to Top" button for bloggers

Adding an attractive "Back to Top" Button to your blogs can make it look more professional and provides an easy navigation option to the readers.This tutorial will show you how to add new "Back to Top" button with "Smooth Scrolling" and "Fade Out" effects.Actually its a JQuery script that does all the work.You can see the demo at the bottom left side of this blog post.

How to add the "Back to Top" Button

1. Go to Blogger>>Design

2. Add a new HTML/JavaScript

3. Paste the following code to it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();
   
    // fade in #back-top
    $(function () { 
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>
<style>
#back-top {
position: fixed;
bottom: 30px;
margin-left: -170px;
}
#back-top a {
width: 45px;
display: block;
text-align: center;
font: 8px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #666;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover {color: #000;}
/* arrow icon undefinedspan tag) */
#back-top span {
width: 45px;
height: 45px;
display: block;
margin-bottom: 7px;
background: #777 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhomKoXFxhzuMPoo0cYjMUJKYQ3rf7733xxXG_OBtLbbFY0RjRn417AqhAO67mWi2X9UPs4XD9gKqNmYP5jRjHT9zqcjgJGGdrWlngC-MsdkQhSxsSRw8S20X6CB1Hkq1S4wz9ME0Fwb_kx/s1600/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover span {   background-color: #000;}
</style>

<div id="back-top" style="display: block; ">
<a href="#top"><span></span><font><font>Top</font></font></a>
</div>

4. Save the Widget.

5. Drag it to the bottom left side of the footer.

6. And You are done..!!

Liked my article?Please Join my Blog Here to stay updated with lots more. 

Having any query,feel free to ask me..!!