返回頂部實現方式
阿新 • • 發佈：2019-02-04
func tps tle nbsp posit mar 滾動 col color
通過window對象的scrollTop()實現，$(window).scrollTop()表示滾動條距離上方的距離，$(window).scrollTop(0)表示設置距離為0即返回頂部
<head> <meta charset="UTF-8"> <title>console</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.js"></script> <style> *{margin: 0;padding: 0} div {height: 1000px;background: pink} button{height:30px;width:80px;position:fixed;bottom:5px;right:5px} .hide{display:none} <!--如果class包含hide則不顯示--> </style> </head> <div> 內容區 </div> <button class="returnTop hide" onclick="returnTop()">返回頂部</button> <script> window.onscroll=function () { //滾動條事件 if ($(window).scrollTop()>250){ $(‘.returnTop‘).removeClass(‘hide‘) //如果滾動條距離上方超過250px，則刪除按鈕的hide，即顯示“返回頂部”按鈕 } else{ $(‘.returnTop‘).addClass(‘hide‘)} //如果滾動條距離上方不超過250px，則增加按鈕的hide，即不顯示“返回頂部”按鈕} function returnTop() { $(window).scrollTop(0) //如果點擊“返回頂部”按鈕，設置滾動條距離上方距離為0，即返回頂部 } </script>
返回頂部實現方式