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;
}
<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