ウェブページの内部アンカーポイントを実現するための純粋なCSSの上下オフセットコード例

最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション バーに隠れないように、ジャンプ後に Web ページの内部アンカーを少し下に移動する必要があるという要件に遭遇しました。

ネットでいくつか方法を探してみたところ、ジャンプを制御するためにjsを使うものがほとんどでした。その後、海外の開発者の個人ブログでCSSだけで実装した方法を見つけました。とてもシンプルだと思ったので、その実装方法を翻訳してみました。通常、Web ページの上部にある固定ナビゲーション バーのスタイルは次のように実装されます。

<div class="header" style="position: fixed; top: 0;"></div>

その後、ジャンプ先のリンクのリストが表示されます。

<ul>
  <li><a href="#section1">アンカーテキスト</a></li>
  <li><a href="#section2">アンカーテキスト</a></li>
</ul>

要件は、上記の各リンクをクリックすると、ページが対応する ID のアンカー位置に配置されることです。

<div class="section" id="section1"></div>
<div class="section" id="section2"></div>

ただし、上部に position:fixed の div がある場合、このアンカー ポイントに配置すると、アンカー ポイント内のコンテンツの上部が上部に固定された div によって覆われてしまいます。解決策としては、配置された各コンテンツに空のページ アンカーを追加し、この空の要素にジャンプするページ要素 ID を配置し、ジャンプ時のオフセットを実現するために空の要素の CSS の習熟度を設定します。定義する空の要素は、クラスがアンカーである div であり、div の ID は、上のリンクがジャンプする先の ID に設定されます。

<div class="anchor" id="section1"></div>
<div class="section"></div>
<div class="anchor" id="section2"></div>
<div class="section"></div>

この空要素の CSS プロパティは次のとおりです。

。アンカー{
  表示: ブロック;
  height: 60px; /*上部固定と同じ高さ*/
  margin-top: -60px; /*上と同じ高さに固定*/
  可視性: 非表示;
}

この時点で、私たちが望んでいた内部アンカーポイントジャンプの機能が実現しました。

つまり、ここでのオフセット値は、ジャンプ時に空の要素が占める高さです。このプレースホルダー要素は、アンカー ポイントがジャンプするときに必要なオフセット効果を実現するために使用されます。

これで、純粋な CSS による内部アンカー ポイントのジャンプ アップとダウン オフセットのサンプル コードの紹介に関するこの記事は終了です。CSS 内部アンカー ポイントのジャンプ アップとダウン オフセットのコンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。