解決 HTML Anchor 內文被選單遮住的問題

HTML 的 Anchor 錨點功能十分方便，當網頁過長時可以透過 Anchor 讓訪客快速的移到指定段落，這樣的手法在許多技術文件、部落格都有出現，如果你看到類似 https://coder.tw/?p=123#section1 的網址就是應用 HTML Anchor 的特性，這樣的特性雖然方便卻也帶來一些問題，最常見因為網頁最上方有浮動選單，當訪客點擊 Anchor 連結進到網頁後，雖然瀏覽器有自動捲到指定章節，但卻有部分文字被選單遮住，我始終很煩惱這問題，今天恰好在閱讀 Facebook 技術文件時發現他們的解法蠻不錯的。

HTML Anchor 可以讓你在任意 HTML 標籤裡面設定 ID，之後將網址最後面加上 #id，當訪客使用此網址時，會快速捲動到 ID 設定的位置。

<!-- https://example.com/index.html#section2 -->
<h2 id="section2"></h2>

HTML Anchor Link 會自動將網頁捲動到指定的位置，但如果有浮動選單就會遮住部分文字。

解決方法很有趣，當 Anchor 連結點進來時，瀏覽器會自動捲到 h2 的上緣，如果用將 h2 的高度增加，並讓 h2 裡面的文字靠下對齊，自然可以避開浮動選單的阻擋，以下示範用 CSS :before 的方式做到這件事情：

範例：html_anchor ｜ Gist

其中最關鍵的 CSS 程式碼：

body :target:before{
  display: block;
  content: "";
  height: 160px;
  margin: -160px 0 0;
}

簡單來說，透過 :before 在 h2 的前面加上一個高度 160px 的區塊，比較特別的是 :target 這個虛擬選擇器代表 HTML Anchor 連結的目標，是在 CSS3 出現的，大部分瀏覽器都已支援，透過這幾行 CSS 就可以讓你的 Anchor Link 不再跟浮動選單打架囉！