前言

在閱讀長篇網頁時，如果需要手動慢慢滾動回到頁面最頂端，對使用者來說非常不便。「回到頂部（Back to Top）」按鈕是現代網站標準的 UX 設計之一，今天我們就來用 DOM 操作與原生 API 完成這項功能。

觀念與函式深度解析

1. window.scrollTo({ top: 0, behavior: 'smooth' }) 函式

• 為什麼選用這個函式？

  我們需要控制瀏覽器的滾動位置，將視窗頁面瞬間或平滑地捲動到最頂端 (top: 0)。傳入一個配置物件並加上 behavior: 'smooth'，瀏覽器就會自動以流暢的滑動動畫幫你滾動到目標位置，完全不需要自己寫複雜的 JavaScript 動畫計時器！

• 這個函式在幹嘛？

  將瀏覽器視窗滾動到指定座標 (top, left)。

• 有沒有其他替代方案？

  • 方案 A：window.scrollTop = 0 或 document.documentElement.scrollTop = 0
    • 簡介：直接重置滾動位置數值。
    • 比較：這種做法會導致畫面「瞬間暴跳」到頂部，視覺體驗非常生硬；而 scrollTo 支援平滑滾動選項，效果好得多。
  • 方案 B：CSS html { scroll-behavior: smooth; }
    • 簡介：在全域 CSS 啟用平滑滾動，搭配 <a href="#"> 超連結跳轉。
    • 比較：這樣寫雖然簡單，但會影響全頁面所有的錨點跳轉，且無法透過 JS 精準操控滾動觸發時機或加上額外邏輯（如紀錄行為數據）。

2. 動態顯示與隱藏（window.scrollY > 閥值）

• 為什麼選用這個條件判斷？

  當使用者還在頁面頂部時，不需要顯示「回到頂部」按鈕（畫面會顯得雜亂）。只有當使用者向下捲動超過一定距離（例如 300px）時，我們才使用 CSS Class 來滑入或淡出顯示按鈕。

完整實作程式碼

HTML
<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>第九課 - 回到頂部按鈕與平滑滾動</title>
  <style>
    body { font-family: sans-serif; margin: 0; padding: 20px; background-color: #f4f6f8; }
    
    .content { max-width: 800px; margin: 0 auto; line-height: 1.8; }
    .box { height: 400px; background: white; margin-bottom: 20px; padding: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }

    /* 回到頂部按鈕的基本樣式 */
    .back-to-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 50%;
      font-size: 20px;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      
      /* 預設視覺狀態：隱藏且透明 */
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px); /* 稍微往下偏 */
      transition: all 0.3s ease;   /* 淡入滑出動畫 */
    }

    /* 滾動到指定距離後啟用的 Class */
    .back-to-top.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);    /* 還原位置 */
    }

    .back-to-top:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>

  <div class="content">
    <h1>📄 長文章內容標題</h1>
    <p>向下捲動頁面超過 300px，右下角會出現「回到頂部」的圓形按鈕！</p>
    
    <!-- 建立長頁面內容 -->
    <div class="box"><h3>區塊 1</h3><p>內容載入中...</p></div>
    <div class="box"><h3>區塊 2</h3><p>內容載入中...</p></div>
    <div class="box"><h3>區塊 3</h3><p>內容載入中...</p></div>
    <div class="box"><h3>區塊 4</h3><p>內容載入中...</p></div>
  </div>

  <!-- 回到頂部按鈕 -->
  <button id="backToTopBtn" class="back-to-top" aria-label="回到頂部">↑</button>

  <script>
    // ----------------------------------------------------
    // JavaScript 邏輯 (視窗滾動監聽與平滑滾動)
    // ----------------------------------------------------

    // 第一步：取得回到頂部按鈕 DOM
    const backToTopBtn = document.getElementById("backToTopBtn");

    // 第二步：監聽視窗滾動事件
    window.addEventListener("scroll", function() {
      
      // 判斷當前向下滾動距離是否超過 300 像素 (px)
      if (window.scrollY > 300) {
        // 超過 300px：加上 .show 類別，顯示按鈕
        backToTopBtn.classList.add("show");
      } else {
        // 未滿 300px：移除 .show 類別，隱藏按鈕
        backToTopBtn.classList.remove("show");
      }
      
    });

    // 第三步：為按鈕綁定點擊事件
    backToTopBtn.addEventListener("click", function() {
      
      // 使用 window.scrollTo 並傳入物件參數
      // top: 0 代表目標是頁面最頂端
      // behavior: 'smooth' 啟用原生平滑滑動效果
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
      
    });
  </script>
</body>
</html>

總結與實用情境

今天我們掌握了 DOM 的動態顯隱（Opacity + Transition 動畫）與瀏覽器視窗滾動 API 的整合使用。這種對滾動狀態進行反應的思維，未來能廣泛應用在固定式選單 (Sticky Header)、滾動觸發彈窗等視覺組件上！

下集預告

在購物網站或登入頁面中，點擊按鈕時常會彈出一個遮罩浮窗（Modal），所以下一集 —>

【第十課】彈窗效果：輕量化 Modal 燈箱效果（遮罩層控制與阻擋滾動），我們將學習如何打造浮動彈窗並處理背景滾動阻擋問題。