HTML 錨點連結教學：用 id 跳到指定位置、平滑捲動與固定頁首遮擋的解法

長文章、常見問題頁、單頁式網站，常會在上方放一排目錄，點一下就捲到下面對應的段落。這種「跳到指定位置」的連結叫做錨點連結，只要 HTML 加上一點點 CSS 就能做到。

基本寫法：id 加上 # 連結

只要兩個步驟：

1. 在要跳過去的位置（通常是標題）加上 id。
2. 連結的 href 寫成 # 加上那個 id。

<nav>
  <a href="#price">價格方案</a>
  <a href="#faq">常見問題</a>
</nav>

<h2 id="price">價格方案</h2>
<p>……</p>

<h2 id="faq">常見問題</h2>
<p>……</p>

點「常見問題」，頁面就會捲到 id="faq" 的標題。

舊寫法的 name 已經不需要了

這篇文章舊版的寫法，是另外放一個空的 <a name="commentform" id="commentform"></a> 當作記號。a 標籤的 name 屬性在 HTML5 已經列為過時，現在直接在標題或區塊加上 id 就可以，不需要再另外放一個空的 a 標籤。

id 的命名規則

• 同一頁不能重複：重複的話，只會跳到第一個。
• 不能有空格，而且大小寫有差別（FAQ 和 faq 是不同的）。
• 建議用英文小寫、數字和連字號，例如 contact-form。中文的 id 在現代瀏覽器也能用，但複製網址分享時，常會變成一長串 %E8%81 開頭的編碼，比較不好看。

連到其他頁面的指定位置

在網址後面加上 # 和 id 就好：

<a href="/services#faq">看服務說明的常見問題</a>

回到頁面最上方

<a href="#top">回到頂端</a>

#top 是特別的寫法：就算頁面上沒有 id="top" 的元素，瀏覽器也會捲回最上方。

平滑捲動：scroll-behavior

預設點了錨點會「瞬間」跳過去，訪客容易搞不清楚自己在頁面的哪裡。在 CSS 加上一行，就會變成慢慢捲過去：

html {
  scroll-behavior: smooth;
}

以前要用 jQuery 的 animate() 才做得到，現在不需要任何 JavaScript。

尊重「減少動態效果」的設定

有些人對畫面移動比較敏感，會在手機或電腦的系統設定裡開啟「減少動態效果」（各系統的名稱不太一樣）。比較體貼的寫法，是只在對方沒有開啟這個設定時才平滑捲動：

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

固定頁首擋住標題：scroll-margin-top

網站如果有固定在上方的選單（捲動時一直停在畫面最上面），錨點跳過去之後，標題剛好會被選單擋住。

解法是 scroll-margin-top，意思是「捲到這個元素時，上方要多留一段空間」：

h2,
h3 {
  scroll-margin-top: 90px; /* 固定選單的高度,再多留一點空間 */
}

數值設成固定選單的高度再多一點。手機和電腦的選單高度不一樣的話，可以用 CSS 變數搭配媒體查詢：

:root {
  --header-height: 64px;
}

@media (min-width: 1024px) {
  :root {
    --header-height: 96px;
  }
}

[id] {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

[id] 代表「所有有 id 的元素」，這樣不管錨點設在標題還是其他區塊，都會自動留出空間。

另一種寫法：scroll-padding-top

這篇文章舊版用的是 scroll-padding-top，寫在負責捲動的容器（通常就是 html）上，效果類似：

html {
  scroll-padding-top: 90px;
}

兩者的差別：

• scroll-padding-top：寫一次，整頁的錨點都適用。
• scroll-margin-top：寫在個別元素上，可以依不同元素設定不同的距離。

擇一使用就好，兩個同時寫的話，留白的距離會疊加。

用 JavaScript 捲動到指定位置

按鈕（不是連結）要捲到某個區塊時，可以用 scrollIntoView，它一樣會套用 scroll-margin-top 的設定：

document.querySelector('#faq').scrollIntoView({ behavior: 'smooth', block: 'start' });

「回到頂端」的按鈕則可以用：

window.scrollTo({ top: 0, behavior: 'smooth' });

WordPress 怎麼設定錨點？

區塊編輯器不需要寫程式碼：

1. 點選要跳過去的標題區塊。
2. 右側的區塊設定打開「進階」，在「HTML 錨點」填入名稱，例如 faq。
3. 選取目錄上的文字加上連結，網址填 #faq。

平滑捲動與 scroll-margin-top 的 CSS，傳統主題可以加在「外觀 → 自訂」裡的附加 CSS；區塊主題則在網站編輯器的樣式設定裡，找自訂 CSS 的選項。

跳不過去？常見原因

• 連結和 id 對不上：檢查拼字與大小寫，# 後面不要有空格。
• 同一頁有重複的 id：只會跳到第一個。
• 目標元素被隱藏了：收合的選單、還沒切換到的分頁標籤裡的元素，如果是 display: none，就跳不過去。
• 平滑捲動沒效果：如果網頁的捲動不是發生在整個頁面，而是某個設定了 overflow: auto 的區塊，scroll-behavior 要寫在那個區塊上，而不是 html。另外，用了上面「減少動態效果」的寫法時，系統有開啟這個設定就不會平滑捲動，這是正常的。
• 跳過去的位置有偏差：上方的圖片還在載入，載入後把內容往下推。幫圖片加上 width、height 屬性預留空間，就能改善。

延伸閱讀

• 連結另開新視窗怎麼寫？target=_blank 與 noopener 用法（含 iframe 內連結）
• RWD 響應式網頁怎麼做？viewport 語法與 CSS 基本寫法完整教學
• CSS div 置中完整整理：水平置中、垂直置中的 6 種寫法

目錄、錨點、回到頂端這些小設計，能讓訪客在長頁面裡更快找到想看的內容。正威網路行銷是基隆在地、25 年經驗的基隆網頁設計工作室，提供客製化網頁設計，歡迎來聊聊。