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

 

因?yàn)榉祷匕粹o一開始設(shè)置是隱藏的，所以這里用的js來(lái)控制顯示隱藏，當(dāng)滾動(dòng)條距離頂部超過(guò)100px時(shí)，讓返回按鈕有過(guò)度的顯示，當(dāng)小于100px時(shí)有過(guò)度的隱藏。



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