CSS の固定ヘッダーによるアンカー ジャンプを防ぐにはどうすればよいですか?

固定ヘッダーのアンカー オフセット: 正確なガイド

Web ページで固定ヘッダーを使用する場合、不快なジャンプが発生するのが一般的ですページのさらに下に配置されたアンカーに移動するとき。これは、アンカーがビューポートの上部に整列し、コンテンツがヘッダーの後ろに隠れたままになるためです。

この問題を軽減するには、ヘッダーの高さを補正するオフセットを導入できます。このオフセットにより、アンカーが正しい位置に配置され、障害なくスクロールし、コンテンツが表示されます。

HTML/CSS ソリューション:

純粋な CSS アプローチは、障害物なしで可能です。 JavaScript の必要性。 「アンカー」などの一意のクラスをアンカー要素に割り当てます。

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

次に、CSS を使用してアンカーのスタイルを設定し、ブロック要素にし、ヘッダーと同じ負の上部オフセットで相対的に配置します。 height (例: -250px):

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

この変更により、アンカーが垂直方向に 250px オフセットされ、アンカーがアクティブな場合、ページがスクロールして、固定ヘッダーに隠れることなく、目的の位置にコンテンツが表示されます。

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