純JS實現點擊按鈕返回頁面頂部的程式碼-js教程-PHP中文網

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

yulia

發布： 2018-10-19 10:37:04

原創

7477 人瀏覽過

大家有沒有發現，不管是在電腦上還是手機上瀏覽網站，當我們往下滑動頁面時，右下角都會有一個按鈕提示用戶可以直接回到頂部，那你知道如何用原生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;
  }

登入後複製

效果如圖所示：

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