create an animated scroll to top

In this tutorial you will learn how you can create an animated scroll to top button with jQuery.

create the button.

 
<a href="#" class="scrollToTop">Top</a> 
 
//----------------------------------------------------
// CSS  PART
// ---------------------------------------------------
 
.scrollToTop{
 width:100px; 
 height:130px;
 padding:10px; 
 text-align:center; 
 background: whiteSmoke;
 font-weight: bold;
 color: #444;
 text-decoration: none;
 position:fixed;
 top:75px;
 right:40px;
 display:none;
 background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
 text-decoration:none;
}
 
 //-----------------------
//  Jquery part  
//---------------------------- 
 
$(document).ready(function(){
 
 //Check to see if the window is top if not then display button
 $(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
   $('.scrollToTop').fadeIn();
  } else {
   $('.scrollToTop').fadeOut();
  }
 });
 
 //Click event to scroll to top
 $('.scrollToTop').click(function(){
  $('html, body').animate({scrollTop : 0},800);
  return false;
 });
 
});