Scroll-Margin-Top を使用してアンカー ジャンプをスムーズに行うにはどうすればよいですか?

正確なアンカー: アンカー ジャンプで垂直方向のスペースを維持する

アンカー リンクを介して Web ページを移動するとき、リンクされているとイライラすることがあります。コンテンツがページの最上部に突然表示されます。この問題は、リンクされたコンテンツの上に垂直方向のスペースを提供することで解決でき、よりシームレスで制御されたナビゲーション エクスペリエンスが可能になります。

この問題に対する 1 つの解決策は、scroll-margin-top アンカー ID を持つ要素のプロパティ。このプロパティは、アンカーがアクティブ化されたときにビューポートの上部に保持するスペースの量を指定します。

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

この例では、

scroll-margin-top を 100px に設定します。アンカー リンクをクリックすると、リンクされたコンテンツがページの上部から 100 ピクセル下に表示され、ナビゲーション バーやヘッダー画像などの他の要素に十分なスペースが確保されます。

この方法は、最新のブラウザーで広くサポートされています。 、アンカージャンプで垂直方向のスペースを維持するための信頼できるソリューションを提供します。この手法を実装すると、Web ページ内でスムーズかつ制御されたナビゲーションが可能になり、ユーザー エクスペリエンスを向上させることができます。

以上がScroll-Margin-Top を使用してアンカー ジャンプをスムーズに行うにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。