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

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.

How to Add "Back to Top" Button?

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/AVvXsEibsd38LPTC7JwHrjhW8rgB5zZZM3ShxzmKMiV2kfrH9topqilKC8Q-plnJnHCz6fhbH2jfD_nhubDNS7117WFmwFwnC7tUyVg8c4Xf0HrvEJ0B8aPfRTdMdkI-CQ4oYEKojnR_5ro1xvKZ/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 i.e left side of the footer.

6. That's all. :)

If you like any image below just replace: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibsd38LPTC7JwHrjhW8rgB5zZZM3ShxzmKMiV2kfrH9topqilKC8Q-plnJnHCz6fhbH2jfD_nhubDNS7117WFmwFwnC7tUyVg8c4Xf0HrvEJ0B8aPfRTdMdkI-CQ4oYEKojnR_5ro1xvKZ/s1600/up-arrow.png with your image URL.

You can Use Some more Images:

========================================================================