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

為什麼要錨點偏移

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

相關文章:

READ  CSS Google Fronts 強大的Googe大神,居然還有推出字型的服務

發表迴響

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