Attractive Back to top button widgets for blogger

Hi readers,

"Back to top" button is one of us very famous widgets in blogger site. It makes your site more professional and most importantly it provides an easy navigation option to readers. This tutorial will show you how to add "Back to top" button with some cool feature "Smooth Scrolling" and "Fade out" Effects. It works on jQuery script. You can see live demo on this blog at left bottom site. So, without wasting any time lets start.

Adding "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/AVvXsEgzm0HVuAVXfbXF2f_d8nRaFGvmlE9Dg4gz6081bVuth5D1zcbtmNicM4poypMFkpBi1dfP3fN4WAQ5Q6-eXEdnRxDdLp29w9zmQaPFTrG_2FujJqk23rkI4UEjd91YKsUJvJakjVlT_KdD/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>