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

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

固定ヘッダーを使用する場合、HTML アンカーの位置に問題が生じる可能性があります。ヘッダーはページの上部にあるため、ページ内のアンカーにリンクするとページがジャンプし、ヘッダーの後ろのコンテンツが見えにくくなります。この問題を解決するには、アンカーにオフセットを適用します。

CSS 解決策:

JavaScript を使用せずに CSS を利用してアンカーの位置を調整します。アンカーにクラスを割り当てます。

<a class="anchor">

このアンカーは、ブロック要素として配置し、position:relative; を適用することで、ページ上の実際の位置からオフセットできます。 style:

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

「top」の値（この例では-250px）がオフセット量を表します。これにより、アンカーが元の位置から 250 ピクセル上に移動します。 「visibility: hidden」属性により、アンカーが表示されなくなりますが、クリックには反応できるようになります。

正確なオフセット値はヘッダーの高さによって異なる場合があることに注意してください。アンカーがページ上の正しい位置にスクロールするように、適切に調整してください。

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