當訪客點擊 Anchor 連結進到網頁後，雖然瀏覽器有自動捲到指定章節，但卻有部分文字被選單遮住，這問題，在 Facebook 技術文件時發現他們的解法蠻不錯的。
HTML Anchor 可以讓你在任意 HTML 標籤裡面設定 ID，之後將網址最後面加上 #id，當訪客使用此網址時，會快速捲動到 ID 設定的位置。
方法一：
解決方法很有趣，當 Anchor 連結點進來時，瀏覽器會自動捲到 h2 的上緣，如果用將 h2 的高度增加，並讓 h2 裡面的文字靠下對齊，自然可以避開浮動選單的阻擋，以下示範用 CSS :before 的方式做到這件事情：
範例：html_anchor ｜ Gist
其中最關鍵的 CSS 程式碼：
:target:before{ display: block; content: ""; height: 160px; margin: -160px 0 0; }
簡單來說，透過 :before 在 h2 的前面加上一個高度 160px 的區塊，比較特別的是 :target 這個虛擬選擇器代表 HTML Anchor 連結的目標，是在 CSS3 出現的，大部分瀏覽器都已支援，透過這幾行 CSS 就可以讓你的 Anchor Link 不再跟浮動選單打架囉！
方法二：
:target{ padding-top:80px; margin-top:-80px; }
資料來源：https://coder.tw/?p=7479
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 程式碼：
:target:before{ display: block; content: ""; height: 160px; margin: -160px 0 0; }
簡單來說，透過 :before 在 h2 的前面加上一個高度 160px 的區塊，比較特別的是 :target 這個虛擬選擇器代表 HTML Anchor 連結的目標，是在 CSS3 出現的，大部分瀏覽器都已支援，透過這幾行 CSS 就可以讓你的 Anchor Link 不再跟浮動選單打架囉！
方法二：
:target{ padding-top:80px; margin-top:-80px; }
資料來源：https://coder.tw/?p=7479