HTML の特定の要素までスムーズにスクロールするにはどうすればよいですか?

HTML を使用して特定の要素にスクロールする方法

HTML では、アンカー () 要素を利用して直接リンクできます。ページ上の特定の要素に。このメソッドを使用すると、ユーザーがアンカー リンクをクリックすると、ブラウザはターゲットの要素まで自動的にスクロールします。

これを実現するには、ユーザーがクリックしたい場所にアンカー () 要素を配置するだけです。をクリックし、スクロール先の要素に「id」属性を割り当てます。例:

<a href="https://www.php.cn/link/c9da108374dde45533baccabee5beb23"></a>

<div>
<p>ユーザーが「href="https://www.php.cn/link/c9da108374dde45533baccabee5beb23"」のアンカー リンクをクリックすると、ブラウザはページを下にスクロールします。 「id="google"」の要素。ただし、この手法では通常、突然のスクロール動作が発生します。</p>
<p>よりスムーズなスクロール効果を実現するには、CSS に次のコードを含めることができます。</p>
<pre class="brush:php;toolbar:false">html {
  scroll-behavior: smooth;
}

この CSS を組み込むことで、アンカー リンクとターゲット要素の間のスクロール アニメーションがよりスムーズになり、より視覚的に魅力的なエクスペリエンスをユーザーに提供します。