JavaScript實現返回頂部按鈕案例

阿新 • • 發佈：2021-11-08

本文例項為大家分享了實現返回頂部按鈕的具體程式碼，供大家參考，具體內容如下

思路：

首先先設計出其靜態樣式，這裡主要利用固定定位，將其固定在頁面底部的某一位置處

.backtotop {
    position: fixed;
    bottom: 80px;
    right: 80px;
    width: 80px;
    height: 80px;
    background-color: #ccc;
    font-size: 20px;
    text-align: center;
    padding-top: 12px;
    box-sizing: border-box;
    cursor: pointer;
    color: #000;
    /* 先隱藏按鈕 */
    display: none;
  }

JavaScript實現返回頂部按鈕案例

其次就是設計邏輯部分：當滑鼠點選“返回頂部”按鈕時，則會以每20毫秒的週期以一定“速度”返回到頂部，回到頂部之後則要進行清除，否則將出現只要一往下拉頁面就會自動返回頂部的現象；在這裡就要用到兩個方法一個是 setInterval，一個是clearInterval，前者是設定定時器，後者為清除定時器。

在這裡要注意一點的是，為了不引起衝突，在設定定時器之前要進行“設表先關”

最後為了增加使用者的體驗感，我們需要設計成，當前如果是在頂部時，那麼“返回頂部”按鈕就會自動隱藏；當前如果不在頂部時，“返回頂部”按鈕就顯示

最後我們來看一下完整的案例：

<a href="script:;" rel="external nofollow" class="backtotop" id="backtotop">返回<br>頂部& 
lt;/a>

a {
    text-decoration: none;
  }

  body {
    height: 5000px;
  }

  .backtotop {
    position: fixed;
    bottpkSZmOom: 80px;
    right: 80px;
    width: 80px;
    height: 80px;
    background-color: #ccc;
    font-size: 20px;
    text-align: center;
    padding-top: 12px;
    box-sizing: border-box;
    cursor: pointer;
    color: #000;
    /* 先隱藏按鈕 */
    display: none;
}

<script>
(function(){
  //獲得元素
  var backtotop = document.getElementById('backtotop');

  var timer;
  backtotop.onclick = function(){
    //設表先關，防止定時器衝突
    clearInterval(timer);

    //設定定時器
    timer = setInterval(function(){

      // 更改根元素的scrollTop元素值
      //相容性問題
      var top = document.documentElement.scrollTop || document.body.scrollTop;
      top = top - 80;
      document.documentElement.scrollT客棧op = top;
      document.body.scrollTop = top;

      //判斷
      if(top <= 0) {
        //關閉定時器
        clearInterval(timer);
      }
    },20);
  };

  //監聽頁面滾動
  window.onscroll = function() {
    //得到捲動值
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY;

    //當頁面沒有捲動時，返回頂部 按鈕就隱藏
    if(scrollTop == 0) {
      backtotop.style.display = 'none';
    }else {
        backtotop.style.display = 'block';
    }
  };
})();

<script>

當頁面沒有發生捲動時：

JavaScript實現返回頂部按鈕案例