Smooth Scrolling Using CSS

We discussed anchor links before, a special type of link that points to specific sections of a webpage. And by default, when you click on that link, you will jump to the linked element directly, without any transitions.

html

<a href="#heading2">Go</a>
 
<p>. . .</p>
<p>. . .</p>
<p>. . .</p>
 
<h2 id="heading2">Heading</h2>
 
<p>. . .</p>
<p>. . .</p>

You can implement a smooth scrolling phase by setting the scroll-behavior property to smooth.

css

:root {
  scroll-behavior: smooth;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <button disabled>Loading...</button>
</body>

</html>