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 可以讓你「再」任意 HTML 標籤裡面設定 ID
末段:
透過這幾行 CSS 就可以讓你的 Anchor Link 不「在」跟浮動選單打架囉!
感謝提醒