目錄點了卻看不到標題？用 scroll-margin 避開固定頁首

內容目錄

點文章目錄後，網址已經多了 #pricing，頁面也捲動了，卻只看見一段正文。先往上捲一點：如果標題藏在固定頁首下面，問題可能出在捲動停靠的位置。

可以在目錄對應的目標元素加上 scroll-margin-top，讓捲動時在上方預留空間。先確認連結真的到達正確段落，再處理遮擋；連結指向錯誤的 ID，加大間距也找不到原本的標題。

把預留空間加在目標標題

以下是一般頁內錨點的示例，目錄連到 #pricing，標題使用相同的 ID：

<h2 id="pricing">費用與交付內容</h2>

#pricing {
  scroll-margin-top: 80px;
}

MDN 說明了 scroll-margin-top 的長度設定，也在捲動對齊示例中示範用它替固定頁首預留空間。這個屬性不會把標題平常的排版往下推，無須為每個段落加一大塊空白。

80px 是本例的設定：固定頁首高 64px，再留 16px 閱讀空間。你的網站應按實際遮住內容的高度調整。手機導覽換行、登入後出現工具列，或頁首隨捲動縮小，都可能讓需要的距離不同。

對照圖使用同一個服務說明版型，目錄連到「費用與交付內容」；圖中的服務與價格不是本站商品資訊。前版的目標設定為 scroll-margin-top: 0，後版改成 80px；固定頁首都維持 64px，內容與目標位置相同。

比較時看標題上緣與頁首下緣的位置。若標題已露出但兩者貼得很近，可以再留少量閱讀空間；不要看到別人的數值就直接套到整站。

在測試頁先點目錄，再重新開啟帶有 #pricing 的網址。用 Tab 移到目錄連結、按 Enter，也走一次相同路徑。桌機與手機寬度都要確認標題完整可見，並檢查固定工具列或浮動區塊有沒有另外遮住內容。

若仍停在不對的位置，先看目錄的 ID 是否正確，再確認頁面是否由目錄外掛或 JavaScript 自行計算捲動座標。這個做法針對瀏覽器原生頁內連結；自訂捲動程式是否採用同一設定，要看它實際如何定位。

也要留意接近頁尾的標題：頁面剩餘高度不足時，瀏覽器可能已捲到底，無法把目標放在預期位置。這時應先查頁面高度與實際捲動位置，別一直把數值加大。

scroll-margin-top 解決的是停靠時的視覺遮擋。鍵盤焦點、螢幕閱讀器操作與整個目錄的可用性仍需另外測試，不能只因標題露出就判定都已處理完成。

資料查核：2026年10月2日。