Hi friends, today I am going to tell you how to add "Scroll to Top" button to your site or blog. It will help your readers to switch to top very smoothly if they are on end of the page or anywhere in the middle, else it will take a lot of time to scroll to top manually.
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.
No comments:
Post a Comment