有些網(wǎng)站頁面過長，在返回頂部的過程中，需要不要滑動鼠標滾輪來返回頂部，這樣費時又費力，今天我們制作返回頂部按鈕，只需要鼠標輕輕點擊一下，就可以直達頁面頂部。
網(wǎng)頁的主體部分，分別用了寬度一致（1000px）、高度各不相同、背景顏色不同、居中的四個div盒子組成，使頁面的高度足夠高讓頁面出現(xiàn)滾動條；返回按鈕使用了固定定位（position:fixed），寬高50px的正方形div，始終靠頁面右邊，為了使按鈕醒目背景色偏藍，顏色白色。
Html部分和css部分比較簡單在這里我就不多說了，js部分如圖：

 

因為返回按鈕一開始設(shè)置是隱藏的，所以這里用的js來控制顯示隱藏，當(dāng)滾動條距離頂部超過100px時，讓返回按鈕有過度的顯示，當(dāng)小于100px時有過度的隱藏。



當(dāng)點擊返回按鈕時觸發(fā)事件函數(shù)，這里使用了jquery動畫來用1s的時間使?jié)L動條自動返回頂部。簡單的返回頂部按鈕完成。