Attractive + Smooth Scrolling "Back to Top" button for Blogger Blogs

Adding an attractive "Back to top" button to your Blogs can make it look more professional and most importantly it provides an easy navigation option to 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 on this blog at the left bottom side). I kept the installation to only one step

Attractive + Smooth Scrolling "Back to Top" button for Blogger

Go to Blogger >> Design
Add a new HTML/JavaScript
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/AVvXsEi2UBhX21ElbipeaHdzbXRwuqGVpaIKQkj0HUOeEKaxxHorNuMP4gDuKY3WAC0ndv3mBUt9s8CD-F5IkBTxa43ZQv0wdcUEhUvlG0rqOckD-blv84KxGCly1ltIDm_7BGSgqZCjL2SexzyZ/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>

Replace Red Link(Image URL)

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.