描述：

? ? ? ?本文主要是講，通過css+js實(shí)現(xiàn)網(wǎng)頁中的【返回頂部】功能。

?

實(shí)現(xiàn)代碼：

HTML：

1 <div> 2 <button οnclick="returnTop()" id="btnTop" title="返回頂部">返回頂部</button> 3 </div>

?

CSS：

1 /* return top */ 2 #btnTop { 3 display: none; 4 position: fixed; 5 bottom: 20px; 6 right: 30px; 7 z-index: 99; 8 border: none; 9 outline: none; 10 background-color: #89cff0; 11 color: white; 12 cursor: pointer; 13 padding: 15px; 14 border-radius: 10px; 15 } 16 #btnTop:hover { 17 background-color: #1E90FF; 18 }

?

JS：

1 // 當(dāng)網(wǎng)頁向下滑動(dòng) 20px 出現(xiàn)"返回頂部" 按鈕 2 window.onscroll = function() { 3 scrollFunction() 4 }; 5 6 function scrollFunction() { 7 console.log(121); 8 if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 9 document.getElementById("btnTop").style.display = "block"; 10 } else { 11 document.getElementById("btnTop").style.display = "none"; 12 } 13 } 14 15 // 點(diǎn)擊按鈕，返回頂部 16 function returnTop() { 17 document.body.scrollTop = 0; 18 document.documentElement.scrollTop = 0; 19 }

?

轉(zhuǎn)載于:https://www.cnblogs.com/AnneHan/p/9713701.html

總結(jié)

以上是生活随笔為你收集整理的前端 css+js实现返回顶部功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。