Today i am going to show you how to make simple jquery back to top navigation.
First of all import jquery :
<script language="javascript" src="<%=request.getContextPath()%>/script/jquery-1.4.3.min.js"></script>
Then, declare some css
<style type="text/css">
#toTop {
width:100px;
border:1px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:5px;
position:fixed; /* this is the magic */
bottom:10px; /* together with this to put the div at the bottom*/
cursor:pointer;
display:none;
color:#333;
font-family:verdana;
font-size:11px;
right:10px;
}
</style>
Then, define div tag for back to top
<div id="toTop">^ Back to Top</div>
Then, some jquery
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
Thanks,
Ujjwal Soni
No comments:
Post a Comment