內部錨點連結（anchor link）不但方便用戶導覽，亦有助 SEO，因為搜尋引擎結果有機會展示錨點連結，提升點擊率。但現在網頁設計已變得更加豐富，例如不少網站都採用於固定於頂部的導覽列。這時候我們便不希望用戶點擊錨點連結時，相關區塊直接跳向最頂部，而是留有少量空間。
scroll-margin 解說
固定導覽列帶來的麻煩
如果是傳統的錨點行為，瀏覽器會把目標元素的頂部對齊到視窗的最頂端。因此，當網站有 position: fixed 或 position: sticky 的頂部導覽列時，目標標題或內容會被導覽列遮住一部分，甚至整段標題都看不到。過往開發者會利用 JavaScript 攔截點擊事件，手動計算偏移量後再滾動，但現在我們可更直接用 CSS 的 scroll-margin 來解決。
什麼是 scroll-margin？
scroll-margin 是一組 CSS 屬性，用來定義元素在「被滾動到可視區域」時，四周要預留的額外空間。
它不會影響正常的版面排版（不會推開其他元素），只會在以下情況生效：
- 點擊錨點連結（#id）
- 使用 scrollIntoView()
- 鍵盤導覽（例如 Tab 到可聚焦元素）
- CSS Scroll Snap 的吸附行為
scroll-margin 可接受上、右、下、左的數值。針對頂端固定式導覽列的界面設計，可直接使用 scroll-margin-top。例子如下：
h2, h3, section[id] {
scroll-margin-top: 80px; /* 導覽列高度 + 一點呼吸空間 */
}
當用戶點擊連結跳到這些元素時，瀏覽器會自動在元素上方留出 80px 的空間，讓內容不會被固定導覽列蓋住。
scroll-margin 與 scroll-padding 的分別
scroll-margin 可針對不同目標元素設定滾動時的外邊距，而如果想在整個滾動視窗內側統一地預留空間，可更簡單地使用 scroll-padding。這會影響所有錨點與 scrollIntoView()，寫起來更簡潔。
html {
scroll-padding-top: 80px;
}
固定頂部導覽列加錨點連結是現代網站很常見的組合，以前要用各種奇怪的 Hack 才能解決遮擋問題。現在只要一行 scroll-margin-top 或 scroll-padding-top，就能乾淨俐落地處理。建議可優先在 html 上使用 scroll-padding-top 做全站處理，然後才針對特定元素微調時再加 scroll-margin。
