アンカーリンクの前に垂直方向のスペースを追加するにはどうすればよいですか?

ピクセル オフセットを使用したアンカー リンクの配置

アンカー リンクを使用する場合、リンク先セクションがページの最上部に表示されるのが一般的です。クリックするとページが表示されます。リンク先セクションの前に垂直方向のスペースが必要なシナリオでは、この問題が発生します。

ありがたいことに、「scroll-margin-top」プロパティを利用して、このニーズに対処できます。方法は次のとおりです。

<code class="css">#anchor {
  scroll-margin-top: 100px;
}</code>

アンカー リンクを受け取る要素に、希望のピクセル値を持つ「scroll-margin-top」プロパティを割り当てます。この例では、アンカー タグは ID「anchor」を持つ要素にバインドされています。 「scroll-margin-top」を 100 ピクセルに設定すると、アンカー リンクをクリックすると、ページの上部から垂直方向に 100 ピクセルの間隔で「アンカー」要素に移動するようになります。

これはブラウザです。 -サポートされているソリューション。アンカー リンクの垂直オフセットを制御する互換性のある方法を提供します。

以上がアンカーリンクの前に垂直方向のスペースを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。