純JS實現點擊按鈕返回頁面頂部的程式碼

大家有沒有發現，不管是在電腦上還是手機上瀏覽網站，當我們往下滑動頁面時，右下角都會有一個按鈕提示用戶可以直接回到頂部，那你知道如何用原生JS實現頁面返回頂部的效果嗎？這篇文章就跟大家分享純JS實現點擊按鈕返回頂部的程式碼，有一定的參考價值，有興趣的朋友可以參考一下。

實作點擊按鈕回傳頁面頂端的效果需要用到很多JavaScript知識，例如：function()，document.getElementById()，if函數等等，如有不清楚的小夥伴可以參考PHP中文網的相關文章，或訪問JavaScript影片教學。

實例描述：使用者往下滑動頁面，當滾動條距離頂部的距離大於20px時，出現「返回頂部」的按鈕，點擊按鈕可以直接回到頂部，按鈕消失，具體程式碼如下：

HTML部分：

<button onclick="topFunction()" id="myBtn" title="回顶部">JS返回顶部</button>
<div style="background-color:pink;color:white;padding:80px">向下滑动</div>
<div style="background-color:lightgrey;padding:80px 30px 2500px">页面内容，此处省略一万字</div>

CSS部分：

*{padding: 0;margin: 0;}
   #myBtn {
     display: none;
     position: fixed;
     bottom: 20px;
     right: 30px;
     z-index: 99;
     border: none;
     outline: none;
     background-color: skyblue;
     color: white;
     cursor: pointer;
     padding: 15px;
     border-radius: 10px;
   }
   
   #myBtn:hover {
     background-color: plum;
   }

JavaScript部分：

// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};
  function scrollFunction() {console.log(121);
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById("myBtn").style.display = "block";
      } else {
          document.getElementById("myBtn").style.display = "none";
      }
  }
   
  // 点击按钮，返回顶部
  function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
  }

效果如圖所示：

#以上給大家分享如何用原生JavaScript實現點擊按鈕返回頁面頂部的程式碼，程式碼簡潔，步驟詳細，初學者可以自己動手嘗試，看看你的程式碼能不能實現返回頁面頂部的效果，希望這篇文章對你有幫助！

更多相關教學請造訪 JavaScript中文參考手冊

#

以上是純JS實現點擊按鈕返回頁面頂部的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！