CSS とアンカーを使用してスムーズなスクロールを実現するにはどうすればよいですか?

CSS とアンカーを使用したスムーズなスクロール

シームレスなユーザー エクスペリエンスを実現するために、クリックしたときにスムーズなスクロールを実装したい場合があります。ページの上部にあるボタン。入力ボタンを使用した CSS のみのソリューションも利用できますが、アンカーを活用する代替アプローチを検討します。

スムーズなスクロールを実現するには、指定されたスクロール コンテナーのスクロール動作プロパティ (MDN リファレンス) を利用します。

<code class="css">scroll-behavior: smooth;</code>

このプロパティは、Firefox、Chrome、Safari、Opera などの最新のブラウザーでサポートされています。ただし、Internet Explorer や非 Chromium Edge などのブラウザはスクロール動作をサポートしていないことに注意してください。

これを実装する方法の例は次のとおりです。

<code class="html">
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>


  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</code>

[移動] をクリックすると、ふー！」リンクでは、「foo」要素までスムーズにスクロールし、「トップに戻る」リンクではその逆を体験できます。

このアプローチでは、追加のボタンを必要とせずに、便利でスムーズなスクロール動作が実現します。

以上がCSS とアンカーを使用してスムーズなスクロールを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。