網頁返回頂部之animate方法

點擊返回頂部按鈕，頁面滑動形式回到頂部！

HTML代碼：

<div id="ctop">回到<br>頂部</div>

 

CSS代碼：

#ctop{width:45px; height:45px; position: fixed; left:50%; bottom:120px; border:solid 1px #ccc; background: #fff; margin-left: 600px; text-align: center; line-height: 22px;cursor: pointer; display: none;font-size: 12px; color: #999}

 

JavaScript代碼：

//點擊回到頂部

　　$("#ctop").click(function(){

      　　$("html,body").animate({scrollTop:'0px'},300)

　　})

//判斷元素在網頁下滑多少像素時顯示

      $(window).bind('scroll',function(){

          var len=$(this).scrollTop()

          if(len>=500){

               $('#ctop').fadeIn(500);

          }else{

               $('#ctop').fadeOut(200);

          }

      });