右下角“返回頂部“按鈕
之前寫博客的時(shí)候加了個(gè)返回頂部的功能
采用js的scrollTop屬性實(shí)現(xiàn)了一下這個(gè)簡(jiǎn)單的功能
當(dāng)頁(yè)面特別長(zhǎng)的時(shí)候，用戶想回到頁(yè)面頂部，必須得滾動(dòng)好幾次滾動(dòng)鍵才能回到頂部，如果在頁(yè)面右下角有個(gè)“返回頂部”的按鈕，用戶點(diǎn)擊一下，就可以回到頂部，對(duì)于用戶來(lái)說(shuō)，是一個(gè)比較好的體驗(yàn)。
原理：當(dāng)頁(yè)面加載的時(shí)候，把返回頂部按鈕定位到頁(yè)面的右下角，當(dāng)頁(yè)面從頂部向下滑動(dòng)不超過(guò)300px時(shí)，返回頂部按鈕隱藏，當(dāng)頁(yè)面從頂部向下滑動(dòng)超過(guò)300px時(shí)，返回頂部按鈕顯示，當(dāng)用戶點(diǎn)擊返回頂部按鈕的時(shí)候，頁(yè)面返回頂部。
通過(guò)下面這段js代碼就能夠?qū)崿F(xiàn)上述的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>槑頭腦的博客</title>
</head>
<body>
<div id="to_top" title="返回頂部">
<img src="src/assets/top.png" width="40" height="40">
</div>
</body>
<style>
body{margin:0; padding:0}
#to_top{right: 30px; bottom: 30px; position: fixed; cursor: pointer; display: none;}
</style>
<script>
window.onscroll = function(){
var distance = document.documentElement.scrollTop || document.body.scrollTop; //距離頁(yè)面頂部的距離
if( distance >= 300 ) { //當(dāng)距離頂部超過(guò)300px時(shí)，顯示圖片
document.getElementById('to_top').style.display = "inline";
} else { //距離頂部小于300px，隱藏圖片
document.getElementById('to_top').style.display = "none";
}
var toTop = document.getElementById("to_top"); //獲取圖片所在的div
toTop.onclick = function(){ //點(diǎn)擊圖片時(shí)觸發(fā)的點(diǎn)擊事件
document.documentElement.scrollTop = document.body.scrollTop = 0; //頁(yè)面移動(dòng)到頂部
}
}
</script>
</html>
上面代碼body中的img代碼顯示不了，截了張圖 ↓↓↓
body
</br>
下面是返回按鈕的圖片
top.png
共
同
進(jìn)
步
給個(gè)喜歡喔O(∩_∩)O
