如何防止錨連結隱藏在固定標題後面？

使用固定標題解決錨點偏移問題

使用固定標題瀏覽網頁時，使用者經常會遇到惱人的怪癖。當點擊錨連結時，頁面會突然跳轉，標題下方的內容被隱藏。當標題設定在固定高度時，此問題尤其普遍。為了解決這個問題，我們需要實作一個偏移量來調整錨點的位置以補償標題的高度。這是使用 HTML、CSS 和 JavaScript 的詳細解決方案。

CSS 解決方案：

要使用CSS 偏移錨點，您可以套用下列樣式：

a.anchor {
    display: block;
    position: relative;
    top: [offset value]px;
    visibility: hidden;
}

這裡，[偏移值]表示所需的偏移距離。例如，如果標題高度為 25 像素，則可以將偏移值設為 -250 像素（負數表示向上偏移）。這可以確保當使用者點擊錨點時，頁面將平滑捲動，將錨點帶到可見區域的頂部，而不會顯示標題內容。

HTML 解決方案：

在您的HTML 文件中，只需用適當的內容將您的錨標記括起來即可class:

<a class="anchor">

JavaScript 解決方案:

雖然效率低於CSS或 HTML 解決方案，但您可以透過捕獲錨點點擊事件並使用 JavaScript 來實現偏移手動調整頁面滾動位置：

document.querySelectorAll('.anchor').forEach((anchor) => {
    anchor.addEventListener('click', (event) => {
        event.preventDefault();
        const offset = 25; // Replace with your desired offset
        window.scroll({
            top: anchor.getBoundingClientRect().top - offset,
            behavior: 'smooth'
        });
    });
});

以上是如何防止錨連結隱藏在固定標題後面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！