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

HTML如圖：
 

 
CSS如圖：
 

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

   好了一個(gè)簡(jiǎn)單的返回頂部就完成了。