官網『回到頂端按鈕』(Back-to-Top Button) 設計完整攻略：中小企業如何用一顆右下角小按鈕，把長頁面訪客的耐心留下來

你有沒有在自家官網滾到一半，突然想回首頁看導覽列，結果得用力向上滑五、六下才回得去？這時候如果右下角有一顆小小的「回到頂端」按鈕，一按就跳回去，訪客的耐心會多留 3 秒，多留一屏，就多一次看到你 CTA、聯絡表單的機會。

這顆按鈕看起來小到不像會影響業績，但對於文章頁、產品長頁、方案比較頁這種「內容超過三屏」的頁面，它其實是滑鼠版的電梯，直接決定訪客願不願意繼續逛。這篇要把「回到頂端按鈕」(Back-to-Top Button) 這件事一次講清楚：什麼時候該裝、什麼時候不需要、外觀、觸發時機、動畫、手機版、無障礙細節，全部一次交代。

Photo by Team Nocoloco on Unsplash

一、什麼樣的頁面才需要「回到頂端按鈕」？

先問一個更基本的問題：你的官網真的需要嗎？答案不是「一定要有」也不是「不需要」，而是分頁面看。

需要的頁面：部落格文章頁（動輒 2000 字以上）、產品規格長頁、方案比較頁、FAQ 大量堆疊頁、公司歷程/時間軸頁、單頁式官網（One-Page）分區太長時。這些頁面訪客會滑得很遠，離導覽列很遠，就需要一個「快速回頭」的入口。

其實不太需要的頁面：首頁（訪客通常不會滑到底再回頂）、聯絡我們（頁面本身就短）、產品分類頁（有分頁/篩選，通常會用分頁跳轉而不是滾回頂）、Landing Page（我們希望他順著往下讀到 CTA，不要讓他跳回去）。

簡單一句判斷法：如果頁面「一屏看不完，還會滑到 3 屏以上」，就該有回到頂端按鈕；如果沒有，那顆按鈕反而是視覺垃圾。

二、位置：右下角是標準，但別擋到別的東西

回到頂端按鈕的位置，98% 的網站都放右下角，這已經是使用者的肌肉記憶，不要輕易挑戰。左下角、正下方浮動、跟隨側邊欄，這些「創新」通常只會讓訪客找不到。

但右下角現在其實非常擁擠：

• LINE 官方帳號浮動按鈕
• Live Chat 客服對話框
• Sticky CTA（例如「立即詢價」）
• Cookie 同意條（初次訪問時）

這幾個一起塞在右下角，畫面會變成一個「按鈕地雷區」，訪客根本不敢點，因為怕點錯。正確的做法是排優先順序：CTA/LINE > Live Chat > 回到頂端。 回到頂端按鈕通常是最上面那顆（最靠上緣），因為它最不緊急、最不需要被馬上點到。

間距上，按鈕與螢幕邊緣至少留 20px，按鈕彼此之間留 12-16px，才不會擠成一團。

三、外觀：小、乾淨、不搶戲

回到頂端按鈕的外觀原則只有一個：看得到、但不搶內容的焦點。這顆按鈕存在的目的是輔助工具，不是行銷利器，做太搶眼反而會讓訪客誤以為它是主 CTA，一按之後才發現「啊只是回頂端」，體驗會很差。

可以參考的規格：

• 尺寸：桌機 48-56px，手機 44-52px（滿足 iOS 44pt 觸控最小值）
• 形狀：圓形是主流，圓角方形也可以，不要太尖銳
• 顏色：品牌主色 or 中性深灰（例如 #333、#555），不要用紅色/橘色這種警示色
• 透明度：0.7-0.9，讓它稍微能穿透看到後面內容
• 圖示：一個乾淨的向上箭頭 (↑ 或 chevron-up)，最多加「TOP」文字，不要塞太多字
• 陰影：淡陰影 (box-shadow: 0 2px 8px rgba(0,0,0,0.15))，做出浮起來的感覺

不要做的：不要用 GIF 動圖、不要閃爍、不要塞一大段文案（「回到頁面最上方」六個字塞在小按鈕裡看起來很擁擠），不要用漸層+粗邊框讓它看起來像廣告 banner。

四、觸發時機：不要一進頁面就跳出來

最常見的錯誤是「網頁一載入，回到頂端按鈕就顯示」。訪客在頁首，按鈕卻叫他回頁首，這在邏輯上是矛盾的，同時佔用視覺空間。

正確的觸發邏輯：訪客往下滑超過一屏（100vh）或 300-500px 之後，按鈕才淡入顯示。回到頁首之後，按鈕再淡出隱藏。這樣訪客只有在「真的滑遠了、可能想回去」的時候，才會看到那顆按鈕。

技術上就是一小段 JavaScript，監聽 scroll 事件、判斷 window.scrollY 超過某個閾值時切換 CSS class。現代做法會用 IntersectionObserver 或 CSS 的 scroll-timeline，效能更好。這種等級的功能，即便是 WordPress，用一個 3KB 的 code snippet 就能做，不需要裝任何肥大的外掛。

Photo by Hal Gatewood on Unsplash

五、動畫：淡入淡出 + 平滑滾動

兩個動畫細節做對了，體驗會從「還可以」變成「有質感」：

1. 按鈕本身的顯示動畫：不要「啪」一下跳出來。用 300ms 的透明度加上輕微上移動畫 (opacity: 0 → 1、translateY: 10px → 0)，訪客的餘光才會自然接受它的出現。

2. 點下去之後的滾動動畫：預設 window.scrollTo(0, 0) 是瞬間跳回頁首，訪客會瞬間迷失方向（他不知道自己剛才滑了多遠）。正確做法是用 window.scrollTo({ top: 0, behavior: 'smooth' })，讓頁面平滑地滾回頂端，訪客有一個「我剛才滑了多長」的空間感，回到頁首之後也更容易重新定位。

平滑滾動的時間建議控制在 400-800ms 之間。太快變成瞬移沒感覺、太慢會被覺得卡頓。如果頁面超級長（例如 1 萬 px 以上），可以用固定速度而非固定時間，避免長頁面滾太久。

六、手機版：非常不一樣的考量

手機上這顆按鈕的角色其實比桌機還重要。原因很簡單：手機螢幕小、每屏能看的內容少、滑到底可能已經是第 20 屏，靠拇指往上滑要滑 30 秒才會回頁首。

但手機版要處理幾個獨特問題：

• 拇指區衝突：右下角在手機上就是拇指最方便按的區域，同時也是你放 LINE 按鈕、詢價按鈕的地方。優先讓 CTA 佔黃金位置，回到頂端可以縮小、往上退一點
• 底部導覽列：如果你有做 Bottom Tab Bar（首頁/服務/聯絡三個 Tab），回到頂端要放在 Tab Bar 上方，不然會被吃掉
• 安全區域：iPhone 底部有 home indicator（那條白線），CSS 要用 env(safe-area-inset-bottom)，不然按鈕會被系統 UI 蓋到
• iOS 內建手勢：iOS Safari 點頂端狀態列本來就會回頁首，但很多人不知道，所以還是要有明顯按鈕

七、SEO 與無障礙細節

你可能會想：一顆回到頂端按鈕跟 SEO 有什麼關係？其實有。

SEO 面：這顆按鈕不要用 <a href="#">，這是很多人犯的懶惰錯誤。用 # 會讓 Google 索引一個沒意義的 URL 片段，也可能造成瀏覽器歷史紀錄污染。正確用 <button> 元素配 JavaScript，或是 <a href="#top"> 並在頁首放一個 id="top" 的錨點。

無障礙面（這在台灣的 CNS 15251 無障礙規範或政府採購案中越來越重要）：

• 按鈕要有 aria-label="回到頁面頂端"，讓螢幕閱讀器能讀出功能
• 按鈕要能用鍵盤 Tab 到，並用 Enter/Space 觸發
• focus 狀態要明顯（可見的 outline 或框線），視障或行動不便的訪客靠鍵盤操作時才不會迷路
• 顏色對比要達 WCAG AA 標準（4.5:1 以上）

做到這些，官網才算真的「開放給所有人」，同時也在 Google 的 Core Web Vitals 使用者體驗指標中加分。

Photo by Balázs Kétyi on Unsplash

八、常見的 5 個錯誤，一次講完

錯誤 1：按鈕永遠都在，就算在頁首也一直顯示。 應該滑超過一屏才淡入。

錯誤 2：按鈕太大、顏色太搶。 常見於 WordPress 免費外掛的預設樣式，紅色圓圈或亮綠色，看起來像廣告，訪客會刻意忽略。改成中性色、透明度 0.8。

錯誤 3：擋到重要按鈕。 LINE 官方按鈕跟回到頂端按鈕重疊在一起、蓋到 Live Chat，訪客一點就點錯。要仔細排位置與間距。

錯誤 4：點下去瞬間跳頁首。 沒有 smooth scroll，體驗生硬。加一行 CSS html { scroll-behavior: smooth; } 都比沒動畫好。

錯誤 5：手機版忽略 safe-area。 按鈕被 iPhone 底部白條吃掉一半，訪客誤觸旁邊的 Home 手勢。用 padding-bottom: env(safe-area-inset-bottom) 處理。

結語：一個小按鈕，把 3 秒耐心變成 3 屏機會

回到頂端按鈕不會直接讓你多接一張單，它是「留住訪客的邊際工具」。當你的內容頁夠長、夠有料，訪客願意慢慢往下滑；當他滑到底、想回頁首找聯絡表單或首頁時，那顆按鈕就是他的電梯。少了它，訪客會因為「太懶得滑上去」而直接關掉頁面，結果是你花了三小時寫的文章、案例、方案介紹，最後一屏根本沒發揮作用。

如果你要動手，優先順序是這樣：

第一步：檢查官網哪些頁面內容超過三屏，這些是需要按鈕的頁面。
第二步：確認右下角有沒有其他浮動元素，先規劃好位置與間距。
第三步：找配合的網頁公司或工程師實作，提供本文提到的規格（尺寸、觸發時機、smooth scroll、無障礙標籤）。
第四步：手機版單獨測一次，特別是 iPhone 的 safe area。
第五步：上線後用 GA4 或熱圖工具追蹤按鈕點擊率，如果一天有超過 5% 的訪客會點，代表你的內容真的有讓人願意讀完再回頭，這個投資值得。

官網每一個小元件都不會單獨改變業績，但一個一個做對，累積下來訪客的停留時間、頁面深度、詢問轉換率都會慢慢往上跑。做官網不是做一次就好，而是把每個小地方持續優化，把每個訪客的耐心都留下來。