HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)

為什麼要錨點偏移

HTML提供了一個錨點連結的功能 (anchor tag link),換頁或不換頁,都可以把瀏覽器卷軸自動捲到錨點位置,但如果網頁上方有一個黏頭的Header (sticky header),RWD手機版本則習慣使用(sticky header),Header 懸浮本文之上,可能會把錨點的元素內容遮蔽,這時我們則需要偏移(sticky header)的高度,避免錨點元素被遮蔽。

以下提供 CSS 及 JS 兩種方法:

CSS

JS

我個人比較偏好用JS,我覺得相對簡單。

參考:

HTML position:fixed page header and in-page anchors

How to offset anchor tag link using CSS – NO JAVASCRIPT required

相關文章:

READ  CSS 強制換行及強制不換行、強制全部、單詞、單字

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料