Just Follow these simple steps:
1. Add below css to your page. If you are using blogger, then search for ]]></b:skin> and add this code just above it.
/* CSS for adding Scroll to top button by Kamal Nayan START*/
#backtotop {
cursor : pointer;
display : none;
position : fixed;
right: 15px;
float: right;
bottom : 33px;
font-size : 90%;
padding : 10px;
width : 100px;
text-align : center;
background-color : #000;
border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
filter : alpha(opacity=60);
-khtml-opacity : 0.6;
-moz-opacity : 0.6;
opacity : 0.6;
color : #FFF;
font-size : 14px;
z-index : 1000;
}
#backtotop:hover
{
filter : alpha(opacity=90);
-khtml-opacity : 0.9;
-moz-opacity : 0.9;
opacity : 0.9;
}
/* CSS for adding Scroll to top button by Kamal Nayan END*/
2. After CSS, its time for JavaScript and JQuery. Add following script in <head> section of your site. For blogger user, search for <head> and paste these codes just below it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
3. Add a div element with id as backtop anywhere in your site. I have added just after footer, and I will prefer for the same. Search for </body> and paste below code just before it.
<div id='backtotop'>Scroll to Top</div>
You can write any text in place of "Scroll to top".
Keep on reading my blogs.
0 comments:
Post a Comment