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

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

アンカー リンクを使用して Web ページ内を移動する場合、固定ヘッダーがコンテンツを妨げてエクスペリエンスを中断する可能性があります。彼らの後ろに。これを解決するには、ヘッダーの高さを考慮してアンカーをオフセットする必要があります。これは、CSS、HTML、または JavaScript を通じて実現できます。

CSS ソリューション

CSS ソリューションには、アンカー要素にクラスを割り当てることが含まれます。

<a class="anchor">

次に、CSS を使用して、ページ上の実際の位置を基準にしてアンカーの位置を調整できます。たとえば、次の CSS はアンカーを 25 ピクセル上にオフセットします:

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

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