Tuesday, March 12, 2013

Back To Top on Webpage

1.html
<div id="scroll-to-top" style="display:none">Back to Top</div>

2. JS
<script language="javascript">
jQuery(function() {
    jQuery(window).scroll(function() {
        if(jQuery(this).scrollTop() != 0) {
            jQuery('#scroll-to-top').fadeIn();  
        } else {
            jQuery('#scroll-to-top').fadeOut();
        }
    });

    jQuery('#scroll-to-top').click(function() {
        jQuery('body,html').animate({scrollTop:0},800);
    });  
});
</script> 

3.CSS

#scroll-to-top {
display:none;
position:fixed;
width:50px;
height:50px;
bottom:30px;
right:30px;
z-index:9999;
text-indent:-9999px;
border-radius:50%;
background-color: #e5e5e5;
}
#scroll-to-top:hover {
background-position:-200px -150px;
background-color:#333;
}

No comments:

Post a Comment