# 滾動條到一定位置才顯示回到頂部按鈕，點擊直接回到頂部 ``` <style> *{ margin:0; padding: 0; } .content{ height: 2000px; } .goTop{ width: 100px; height: 100px; background-color: #bbb; text-align: center; line-height: 100px; position:fixed; bottom:100px; right: 20px; display: none; } </style> <div class="content"> <h2>返回首屏</h2> <div class="goTop">返回</div> </div> <script> // 邏輯：1.當用戶滑動滾動條 到達400px，返回按鈕顯示，反之小于400時 隱藏 // 2.點擊 返回按鈕 時 滾動條恢復原位 // 讓誰進行滾動 body html let goTop = document.getElementsByClassName('goTop')[0]; window.onscroll = function(){ let res = document.body.scrollTop || document.documentElement.scrollTop; // console.log(res); if(res >=400){ goTop.style.display = 'block'; }else{ goTop.style.display = 'none'; } } //點擊按鈕 goTop.onclick = function(){ document.body.scrollTop = 0;//網頁被卷去的高 document.documentElement.scrollTop = 0;//獲取當前頁面的滾動條縱坐標位置 } </script> ```