解決 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 不再跟浮動選單打架囉!

“解決 HTML Anchor 內文被選單遮住的問題” 有 2 則迴響

  1. 有兩個別字。

    第二段:
    HTML Anchor 可以讓你「再」任意 HTML 標籤裡面設定 ID

    末段:
    透過這幾行 CSS 就可以讓你的 Anchor Link 不「在」跟浮動選單打架囉!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *