網站使用「浮動導覽列」可提供友善的閱讀體驗，讓導覽列隨時保持在網頁最上方，訪客失焦時能重新找到方向。不過這個設計後來發現有個隱藏的缺點，當網站使用了錨點後，訪客點擊錨點時，螢幕捲到的位置看起來怪怪的。
本站為了解決此現象，過去曾調高錨點的位置(放置隱藏的錨點)，或是使用 JS 重新計算正確的座標。而最近多個案件都需要處理錨點異常的狀況，同時網頁版、行動版浮動導覽列高度不一樣的話，計算座標也是麻煩，於是研究了一下此現象有沒有更好的解決方法。
最後發現竟然使用 CSS 就可以做到簡單又完美的解法，請見本篇詳細的說明。
(圖片出處: peakpx.com)
一、為何錨點位置錯誤
1. 錨點的原理
錨點確切的運作方式，可參考這篇「神奇的html錨點，讓你的網頁在內部自由的跳轉」，重點整理如下：
- ID 定位：任何 HTML 元素都可設定，例如 <div id="wfublog"></div>
- NAME 定位：只有 A 標籤可設定，例如 <a name="wfublog"></a>
- 超連結設定：將 A 標籤的超連結設定為井字號 "#" + 定位字串即可，例如 <a href="#wfublog">連結文字</a>
- 訪客點擊這個超連結後，螢幕頂端會自動跳到定位點，也就是放置了對應「id 定位」、或「name 定位」的位置
瞭解以上原理後不難發現，浮動導覽列是有高度的，例如有 100px 高的話，那麼點擊錨點後，螢幕跳到定位點時，這個地方會被浮動導覽列遮住，只看得到定位點下方 100px 處的內容。
2. HTML 解法
這是最簡單的、也是我一開始的作法，建立看不見的定位點，也就是沒有文字內容的定位元素，然後接幾個換行標籤 <br/>，讓距離超過導覽列高度，再接要顯示的文字即可。
但這也是最不建議的解法，只要版型有變動，例如哪天沒用浮動導覽列了，或是導覽列高度改變了，那麼所有曾經使用錨點的文章，就得一篇篇手動改到崩潰。
3. JS 解法
後來比較聰明，改用 JS 自動處理，可避免前一個解法的窘境：
- 監控 A 標籤的點擊事件，當超連結有錨點字串時才處理
- 點擊錨點後，計算導覽列高度，也計算定位點元素的 Y 軸座標
- 將螢幕捲到 (定位點元素的 Y 軸座標) - (導覽列高度) 之處，即可正確顯示錨點文字
如果會寫 JS 的話，按照以上步驟進行即可。
二、CSS 解法原理
根據這個討論串「Fixed page header overlaps in-page anchors」，原來 CSS3 有個選擇器
- 在定位點元素使用偽類
:before 製作看不見的區塊 - 為這個區塊設定高度，跟導覽列一樣高
- 這樣的設定，無形中自動增加了定位點元素的 Y 軸座標
- 使得點擊錨點後，定位點元素有了往下移動的效果，不再被導覽列遮住
補充一下，上述 stackoverflow 討論串，每一個回答的參與者，有志一同幾乎都另外幫偽類區塊加了負值的 margin-top 或 padding-top，將這區塊往上拉回 Y 軸位置，我認為這是沒有必要的。
三、CSS 範例程式碼
1. 最佳解
所以只要使用以下 CSS 程式碼，就能解決浮動導覽列遮住錨點位置的問題：
:target:before {
content: "";
display: block;
height: ??px;
}以上 ?? 請填入導覽列高度即可。
2. 四、處理 Blogger 行動版
如果是 Blogger 平台，只要懂得運用「Blogger 判斷式」還能同時處理網頁版與行動版的 CSS 設定。
例如將前面的 CSS 程式碼，加入以下的判斷式：
<style>
:target:before {
content: "";
display: block;
<b:if cond='!data:blog.isMobile'>
height: ??px; /*這裡 ?? 填入 Blogger 網頁版導覽列高度*/
<b:else/>
height: ??px; /*這裡 ?? 填入 Blogger 行動版導覽列高度*/
</b:if>
}
</style>如此網頁版、行動版浮動導覽列引起的錨點問題，就能同時搞定了！
更多 CSS 相關技巧：