How Can I Smoothly Scroll to a Specific Element in HTML?

How to Scroll to a Specific Element Using HTML

In HTML, you can utilize the anchor () element to directly link to a specific element on the page. By using this method, the browser will automatically scroll to the targeted element when the user clicks on the anchor link.

To accomplish this, simply place an anchor () element where you want the user to click, and assign an 'id' attribute to the element you want to scroll to. For example:

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

<div>
<p>When the user clicks on the anchor link with 'href="https://www.php.cn/link/c9da108374dde45533baccabee5beb23"', the browser will scroll down the page to the element with 'id="google"'. However, this technique typically results in an abrupt scroll behavior.</p>
<p>To achieve a smoother scrolling effect, you can include the following code in your CSS:</p>
<pre class="brush:php;toolbar:false">html {
  scroll-behavior: smooth;
}

By incorporating this CSS, the scrolling animation between the anchor link and the target element will be smoother, providing a more visually appealing experience for the user.