[Day 22] 如何在 React 實現滑動返回頂部按鈕 - 嘗試 30 日寫文充版挑戰

前言 - Prologue

嘗試寫 30 天文充實版面 (跳過假日 ლ(́◕◞౪◟◕‵ლ) ) 更新文章的 Day 22

隨著網頁內容越來越多，使用者需要不斷地滾動頁面，這不僅會使網頁變得混亂，而且會消耗用戶的時間和精力。因此，為了讓使用者更加方便地回到頁面頂部，我們可以在網頁中添加一個「滑動返回頂部按鈕」。本文將展示如何在 React 中實現此功能，並且還將為其添加一些動畫效果，以提高使用者體驗。

正文 - Main text

讓我們設定於當使用者滾動網頁超過 300 像素時，顯示 "Scroll to top" 按鈕，並且當使用者點擊按鈕時，網頁會滑動到頁面的頂部。

首先，在 App.js 中設置 showScroll 狀態，預設值為 false，表示當前不顯示 "Scroll to top" 按鈕。

const [showScroll, setShowScroll] = useState(false);

然後，當使用者點擊按鈕時，需要滑動網頁到頂部。這可以通過使用 window.scrollTo 方法來實現。

const handleClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
};

接著，我們需要使用 useEffect Hook 和事件監聽器來檢測當前的滾動位置，以判斷是否顯示 "Scroll to top" 按鈕。在 useEffect 中，我們添加一個 handleScroll 函數，這個函數會在滾動事件觸發時執行。

useEffect(() => {
  const handleScroll = () => {
    if (window.pageYOffset > 300) {
      setShowScroll(true);
    } else {
      setShowScroll(false);
    }
  };

  window.addEventListener('scroll', handleScroll);

  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

當滾動位置大於 300 像素時，設置 showScroll 狀態為 true，否則設置為 false。接著添加事件監聽器來監聽滾動事件，每次滾動事件觸發時，會執行 handleScroll 函數。最後在 useEffect 中返回一個函數，用於清除事件監聽器。

最後在 App.js 中添加一個按鈕元素，當 showScroll 狀態為 true 時，為按鈕添加 active 樣式，使其顯示在網頁的右下角。當使用者點擊按鈕時，調用 handleClick 函數，使網頁滑動到頂部。

<button
  className={`scroll-to-top ${showScroll ? 'active' : ''}`}
  onClick={handleClick}
>
  <i className="fas fa-chevron-up"></i>
</button>

接著來繼續添加 CSS 樣式。

首先需要設置按鈕的 position 為 fixed，這樣才能保證按鈕固定在網頁的右下角。接著設置按鈕的 opacity 為 0，這樣按鈕一開始是不可見的。然後設置按鈕的 bottom 和 right 屬性，調整按鈕在網頁中的位置。最後設置按鈕的 width 和 height 屬性，使按鈕的大小適當。

.scroll-to-top {
  position: fixed;
  opacity: 0;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  color: #FFF;
  background-color: #222;
  border: none;
  border-radius: 50%;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
  z-index: 999;
}

我們還需要為按鈕中的箭頭圖標設置適當的樣式，以使其垂直居中。可以通過設置 1margin-top` 屬性實現。

.scroll-to-top i {
  font-size: 1.5rem;
  margin-top: 0.25rem;
}

最後為按鈕添加淡出淡入效果。可以通過設置 transition 屬性實現。當按鈕狀態改變時，它的 opacity 屬性的值也會改變，從而產生淡出淡入效果。

.scroll-to-top:hover {
  opacity: 0.7;
}

.scroll-to-top.active {
  opacity: 1;
}

這樣就完成了 "Scroll to top" 按鈕的添加和樣式設置。

後記 - Epilogue

跟同事聊天才發現今天情人節，情人節快樂QQ

幫人用 React 興建部落格中~ 根據要求新增了返回頂部的按鈕，順便練習一下。◝('ω'◝)