只要 10 分鐘！學會錨點選單設定，網站導覽大升級【2025 新手指南】

---

為什麼 2025 你的網站一定要用「錨點選單」？

在手機滑動成癮、資訊爆量的年代，使用者想看到重點——現在就要。錨點選單（Anchor Menu）把整頁內容「切成章節」，一點就跳到該段，像電梯一樣直達目的。套一句客戶最常說的話：「我不想讓訪客再找！」

範例模擬場景
A 小姐經營瑜伽課程頁，換上錨點選單後，課程諮詢提升 38 %。她說：「大家不用捲到手痠，就能直接看價格表，詢問自然變多。」

---

錨點選單是什麼？

定義

錨點選單＝在同一網址內，透過 #id 快速跳轉到特定區塊的導覽列。

小小歷史

• 1995 HTML 2.0 誕生錨點 (<a name>)，僅作文件內引用。
• 2010-2015 一頁式網站（Landing page）興起，錨點選單變成最佳導覽。
• 2023 以後 行動裝置佔流量 70 %，Google 開始重視「可用性」分數，錨點選單再度翻紅。​

原理

1. 為每個段落加 id
2. 將選單連結設為 href="#段落ID"
3. 瀏覽器偵測到 # 後自動平滑捲動（或用 JS 增加動畫）

例子

<section id="price">…</section>
<a href="#price">方案與費用</a>

---

錨點選單能做什麼？

用途	真實案例	適用人群
一頁式銷售頁	美妝品牌「蜜光肌」放上「功效→成分→口碑→下單」四段錨點，轉單率 +42 %	想快速變現的賣家
產品說明書	IoT 新創把 8 千字白皮書用錨點拆章節，客戶找資料省 70 % 時間	SaaS、B2B 企業
長篇部落格	旅遊部落客把「交通、住宿、花費」設錨點，平均停留 +1 分鐘	內容創作者

---

優點與缺點一次看懂

	優點	缺點
UX	快速抵達資訊、降低跳出	章節過多易迷路
SEO	提升使用者互動，Google 可能出現「分段索引」強化片段	單一 URL 關鍵字深度有限
成本	HTML 即可實作，外掛多數免費	若日後要拆分多頁，需重做連結

解方：對內容量大的品牌，建議先用錨點 MVP 測轉換，後續再拆多頁＋內容集群，兩邊好處全拿。

延伸閱讀 ➔ 初稿-錨點、集群兩邊好處全拿！WordPress 後台優化路線圖

---

錨點選單設定 10 分鐘教學（WordPress 範例）

1. 新增區塊 ID
   • 在 Gutenberg 區塊「進階」→錨點填 price。
2. 建立選單連結
   • 自訂連結輸入 #price，文字「方案與費用」。
3. 啟用平滑捲動
   • 安裝WordPress 外掛 🌐 Page Scroll to ID。
4. 測試行動版（Chrome DevTools → Toggle Device）
5. GA4 事件追蹤 gtag('event','anchor_click',{ 'link_text':'price' });

---

費用大公開：DIY VS 外包

項目	DIY (自己做)	找工作室	全方位顧問 Ez2.APP
初期費	0 – NT$ 5,000（外掛/範本）	NT$ 15,000↑	NT$ 30,000↑（含策略）
時間	1 週研究＋排版	3–5 天溝通	1–2 天搞定
風險	走位錯、RWD 破版	溝通落差	價格較高但一次到位

建議：若行銷時程緊迫，且預算允許，直接外包可省機會成本。

---

WordPress 裡實作錨點選單

主要有以下幾種方式：

1. Gutenberg 原生 Anchor 功能
   • 在任意區塊的「進階」設定面板裡，填入「HTML 錨點」（Anchor）欄位（例如 feature、pricing），然後在自訂選單 → 連結項目裡，新增一個「自訂連結」，網址輸入 #feature，標題填成「特色」即可。
2. 使用目錄（Table of Contents）區塊／外掛
   • 安裝像是 Easy Table of Contents、Table of Contents Plus 等外掛，或使用 Advanced Gutenberg、UAGB 提供的「目錄區塊」，自動掃描 H2/H3 標題並生成錨點連結清單。
3. Page Builder（如 Elementor／Beaver Builder）內建 Anchor Widget
   • 在區塊／Section 設定 ID 後，拖放「Anchor」小工具到該 Section；再用「Nav Menu」或「按鈕」指向 #your-id 即可。
4. 主題自帶的一頁式選單功能
   • 有些 One Page 主題（如 OceanWP、Astra、Neve 等）內建「一頁式選單」設定，直接在自訂選單中勾選「啟用一頁式錨點」，即可自動將選單連到同頁區塊。
5. 第三方捲動錨點／平滑捲動外掛
   • 安裝 Page scroll to id、Scrollspy 等外掛，除了生成錨點連結外，還可新增一鍵平滑滾動、捲動偵測（Scroll-Spy）標示當前區段。
6. 手風琴／摺疊式錨點選單區塊
   • 使用像 UAGB 的「折疊面板（Accordion）」或「摺疊內容（Toggle）」區塊，把下層連結放進面板裡，適合多層結構的長頁面導覽。
7. 自訂選單＋ CSS／JavaScript 強化
   • 在 functions.php 或外掛裡註冊一個「錨點選單」位置（register_nav_menu），並在前端用 CSS 將它設定為固定在頁面左右、置頂或浮動，再配合少量 JS 做捲動偵測與高亮。
8. 回到頂部／到底部按鈕
   • 利用小工具（Widget）或自訂 HTML 區塊插入 <a href="#top">回到頂部</a>，並加上 CSS 或外掛如 To Top Button，讓使用者隨時跳轉。

---

常見平台實作錨點方法

Wix
在編輯器中，直接將「錨點」元素拖放至頁面指定區塊，再在任何文字或按鈕設定連結為 #你的錨點ID 即可。

Squarespace
只要在「代碼區塊」或標題區塊的進階設定裡填入 Anchor ID（如 feature），再用頁首選單或按鈕連結 #feature 就能跳轉。

Webflow
選中任一 Section 或元素，於設定面板填寫「ID」欄位；接著在導航連結中輸入 #ID，並可開啟「平滑捲動」選項。

Shopify
在主題編輯器裡，於區塊設定中加入 HTML Anchor（Section ID），再在自訂選單或商品描述裡用 #ID 即可定位。

Drupal
透過核心的「Anchor」標籤或安裝類似 Jump Menu 的模組，為任意區塊加上 ID，再用自訂連結跳轉。

Joomla
在文章編輯器（TinyMCE/Codemirror）中切換 HTML 模式，為元素添加 id="..."，並在菜單管理器或模組中使用 #... 連結。

Ghost
在 Markdown 或 HTML 區塊裡直接手動輸入 <h2 id="section-id">標題</h2>，再用內文連結 #section-id。

Hugo／Jekyll（靜態網站生成器）
大多支援自動為標題生成錨點（如 ## 我的章節 {#my-section}），也可手動在模板加上 id，並以 #my-section 鎖定。

Next.js／Gatsby（React 靜態或 SSR 框架）
在 JSX 裡為元素設定 id="contact"，再透過 <Link href="#contact">…</Link> 或原生 <a href="#contact">…</a> 即可。

Tilda、Duda、Weebly、Strikingly
這類一頁式／輕量網站建置平台，都提供「錨點區塊」或 Section ID 設定，並在選單或按鈕設定 #ID 跳轉。

---

FAQ常見問題

---

---

最後小總結

當網頁內容篇幅太長，讀者常常找不到重點或直接離開——這正是錨點選單要解決的痛點。

透過在頁面頂部提供章節連結，使用者點擊後能平滑捲動直達目標內容，宛如搭乘電梯瞬間抵達目的地般省時省力。

不僅使用者體驗提升，網站的互動率與轉換率也隨之提高，有效減少用戶流失。現在就善用錨點選單，引導讀者迅速採取你期望的行動！

麻煩的又燒腦的事就交給我們！
10 分鐘打造專業錨點選單，提升手機體驗與轉換率！

---