jQuery 筆記 - 讓網頁回到最頂點寫法

記錄一個簡單又好用的 Go Top 寫法，目的是為了如果瀏覽資料很長，就不必一直往上滾動，使用之前的練習，新增一個 Go Top 的按鈕。

HTML 結構

我習慣把同一個元素用一個 <div> 包住，這樣若要更動樣式就可以讓裡面的元素全部吃到，這邊使用 a 連結的特性， href 屬性裡面的值為 #，視為錨點，點選後會自動跳到網頁頂端，裡面包一個 font-awesome 圖示。

<div class="goTop">
  <a href="#" class="goTopBtn jq-goTop">
    <i class="fas fa-arrow-alt-circle-up fa-3x"></i>
  </a>
</div>

CSS 樣式

使用 position: fixed 鎖定於右下角，並設定圖示相關樣式。

.goTop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  .goTopBtn {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    .fa-arrow-alt-circle-up {
      color: $primary;
    }
  }
}

jQuery 行為

點擊 GoTop 按鈕後，html 與 body 給予動畫效果，並且讓捲軸上方回到 0 的位置，時間為 0.6 秒。

$(".jq-goTop").click(function (e) {
  e.preventDefault();
  $("html,body").animate(
    {
      scrollTop: 0,
    },
    600
  );
});

優化

的確已經完成此功能，但在使用者體驗上一開始並不需要有 GoTop 的按鈕，而是要往下滑超過一個高度後才會顯示，

所以 CSS 部分可以多加位移的語法，顯示與隱藏的部分都設定好，

CSS 樣式

//圖示水平移動位置
transform: translateX(0);
transition: transform 0.2s;
//圖示隱藏
&.hide {
  transform: translateX(120%);
}

JS 行為

JS 就是選擇整個瀏覽器，使用 scroll 函式，並下判斷，如果瀏覽器的頂點超過 200px，如果 .goTop 有 .hide 這個 Class，就執行切換 class，不然就增加 .hide。

hasClass() 方法檢查被選元素是否包含指定的 class。

$(window).scroll(function () {
  if ($(window).scrollTop() > 200) {
    if ($(".goTop").hasClass("hide")) {
      $(".goTop").toggleClass("hide");
    }
  } else {
    $(".goTop").addClass("hide");
  }
});

codepen https://codepen.io/hnzxewqw/full/XWXBYvr