在網頁中，我們經常會由於網頁內容過長，而需要在瀏覽網頁時有一個快速回到網頁頂部的功能，在瀏覽網頁內容離頂部
有一段距離時，出現快速回到網頁頂部的工具，從而能使我們的網頁更人性化。
以下分為幾個步驟來實現：
步驟1：引入jquery庫
1 <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
步驟2：在網頁中引入回到頂部的網頁元素，並且設置元素的樣式
1 <div id="gotop"></div>
設置元素樣式，默認開始隱藏
1 <style type="text/css"> 2 #gotop{ 3 display:none; 4 width:55px; 5 height:55px; 6 position:fixed; 7 right:50px; 8 bottom:50px; 9 background:url(images/backtop2013.png) no-repeat -70px 0px; 10 } 11 </style>
步驟3：定義js來控制元素的漸顯、漸隱功能，並且控制網頁滾動條的位置。
1 <script type="text/javascript"> 2 function goTop() 3 { 4 $(window).scroll(function(e) { 5 //若滾動條離頂部大於100元素 6 if($(window).scrollTop()>100) 7 $("#gotop").fadeIn(1000);//以1秒的間隔漸顯id=gotop的元素 8 else 9 $("#gotop").fadeOut(1000);//以1秒的間隔漸隱id=gotop的元素 10 }); 11 }; 12 $(function(){ 13 //點擊回到頂部的元素 14 $("#gotop").click(function(e) { 15 //以1秒的間隔返回頂部 16 $('body,html').animate({scrollTop:0},1000); 17 }); 18 $("#gotop").mouseover(function(e) { 19 $(this).css("background","url(images/backtop2013.png) no-repeat 0px 0px"); 20 }); 21 $("#gotop").mouseout(function(e) { 22 $(this).css("background","url(images/backtop2013.png) no-repeat -70px 0px"); 23 }); 24 goTop();//實現回到頂部元素的漸顯與漸隱 25 }); 26 </script>
按照上面的3個步驟，將可以實現回到頂部的功能。
這個圖片是回到頂部元素用到的背景圖片，需要的朋友可以下載它，或者自己設置樣式時，使用自定義的圖片。