固定ヘッダーを考慮してアンカーをオフセットするにはどうすればよいですか?

固定ヘッダー調整のためのアンカーのオフセット

多くの場合、Web ページ上の固定ヘッダーは、ページ内のアンカーにリンクするときにコンテンツを妨げる可能性があります。この問題を解決するには、次の解決策の実装を検討してください。

CSS Offset

オフセットするアンカーのカスタム クラスを作成します。例:

<a class="anchor"></a>

次のように CSS でアンカーのスタイルを設定します:

a.anchor {
    display: block;
    position: relative;
    top: -25px;
    visibility: hidden;
}

この例では、アンカーは実際の位置から 25 ピクセル上に配置されます。固定ヘッダーの高さに合わせて「上部」の値を調整します。

アンカーが目的の位置にジャンプして表示され、固定ヘッダーの障害物を効果的にオフセットします。

以上が固定ヘッダーを考慮してアンカーをオフセットするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。