為什麼要錨點偏移
HTML提供了一個錨點連結的功能 (anchor tag link),換頁或不換頁,都可以把瀏覽器卷軸自動捲到錨點位置,但如果網頁上方有一個黏頭的Header (sticky header),RWD手機版本則習慣使用(sticky header),Header 懸浮本文之上,可能會把錨點的元素內容遮蔽,這時我們則需要偏移(sticky header)的高度,避免錨點元素被遮蔽。
以下提供 CSS 及 JS 兩種方法:
CSS
:target { padding-top: 65px; margin-top: -65px; }
JS
我個人比較偏好用JS,我覺得相對簡單。
<script> /* jQuery(document).ready(function(e) { var offset = jQuery(':target').offset(); var scrollto = offset.top - 60; // minus fixed header height jQuery('html, body').animate({scrollTop:scrollto}, 0); }) */ </script>
參考:
HTML position:fixed page header and in-page anchors
How to offset anchor tag link using CSS – NO JAVASCRIPT required