アンカーリンクが固定ヘッダーの背後に隠れないようにするにはどうすればよいですか?

固定ヘッダーによるアンカー オフセットの問題の解決

固定ヘッダーを使用して Web ページを移動しているとき、ユーザーは迷惑な癖に遭遇することがよくあります。アンカー リンクをクリックすると、ページが突然ジャンプし、ヘッダーの下のコンテンツは非表示のままになります。この問題は、ヘッダーが固定の高さに設定されている場合に特に顕著です。この問題を解決するには、ヘッダーの高さを補正するためにアンカーの位置を調整するオフセットを実装する必要があります。 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 中国語 Web サイトの他の関連記事を参照してください。