ビューポートの上部からアンカー リンクをオフセットするにはどうすればよいですか?

上部からオフセットのあるアンカー リンク

アンカー リンクを介して Web ページを移動すると、ターゲット セクションがビューポートの上部に直接表示されることがよくあります。 。余裕を持たせるために、リンク領域をページの端からわずかにオフセットすることが望ましいです。

解決策

scroll-margin-top プロパティは簡単な解決策を提供します。アンカーのこのプロパティに値を追加すると、アンカーのリンク位置とページの上端の間にギャップを作成できます。例:

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

このコードは、アンカー リンク経由で移動するときにターゲット セクションを上から 100 ピクセル下にシフトします。

互換性

幸いなことに、このソリューションは、Chrome、Firefox、Safari、Edge などの最新のブラウザーで広くサポートされています。ただし、Internet Explorer などの古いブラウザとの互換性は制限されています。

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