Simple Jquery Back to Top

Hi,

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