アンカー リンクに垂直オフセットを追加するにはどうすればよいですか?

垂直オフセットを使用したアンカー リンクの移動

Web ページ内でアンカー リンクを使用する場合、デフォルトでは、アンカー リンクをクリックすると、リンクされた領域が表示の最上部に配置される特定のセクションに移動します。この動作は、常に望ましいとは限りません。特に、リンクされたセクションまたはターゲットのセクションに到達する前に上部にスペースを維持したい場合はそうです。

この望ましい動作を実現するには、scroll-margin-top プロパティを利用できます。 。このプロパティに特定のピクセル値を適用すると、垂直オフセットを作成できます。

コード:

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

この例では、「#anchor」はリンクされたコンテンツに割り当てられた要素の ID、「100px」は必要な垂直方向のスペースを示します。このプロパティを設定すると、アンカー リンクをクリックすると、ブラウザはリンクされたコンテンツまで下にスクロールしますが、上部には 100 ピクセルのスペースが残るようになります。これにより、より制御されたユーザー フレンドリーなスクロール エクスペリエンスが提供されます。

このアプローチは、最新バージョンを含むさまざまなブラウザーで機能し、最新の Web ページでのアンカー リンクの動作を制御するための信頼できるソリューションになります。

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