在網(wǎng)頁中我們常常見到頁面的左側(cè)或右側(cè)有個懸浮框帶有返回頂部的按鈕，點擊一下就可以帶我們返回當(dāng)前頁面的頂部，今天我們就用JS實現(xiàn)放回頂部的效果。
首先用三個div盒子表示網(wǎng)頁的頂部（box1）、中間部分（box2）、底部（box3），分別設(shè)置它們高度和背景色，三個div盒子加起來的高都要超過瀏覽器一屏的高度，如果三個盒子的高度沒有超過瀏覽器一屏的高度，點擊返回頂部按鈕會沒有效果。懸浮按鈕(top)設(shè)置為絕對定位（fixed），fixed的top值設(shè)置50%（距離瀏覽頂部50%）；靠左或靠右都可以（right設(shè)置為0是為靠右，left設(shè)置為0是為靠左，只能設(shè)置一個，兩個都設(shè)置會沒有效果），在這里我設(shè)置是靠右。圖片如下：
 

HTML如圖：
 

 
CSS如圖：
 

  JS方面要引入jQuery庫，使用jq的animate() 方法，這里我設(shè)置了500ms，讓返回頂部的過程有種平滑感，scrollTop是設(shè)置瀏覽器滾動條距離頂部的距離，這里我們設(shè)置0，如下圖：
 

   好了一個簡單的返回頂部就完成了。