🚀 Make your site come alive: the magic of `scroll-behavior: smooth`

Have you ever clicked on an anchor link (like “Back to top”) and been instantly “teleported” to another part of the page? It”s fast, but very disorienting. The user loses context and doesn”t understand what happened.

Fortunately, there is an incredibly simple and elegant solution that will make your site more professional and enjoyable to use.

The name of this solution is scroll-behavior: smooth.

🤔 What is it and how does it work?

scroll-behavior is a CSS property that determines how scrolling will behave when navigating through anchor links or when controlling the scroll via JavaScript.

By default, its value is auto, which means an instant “jump” to the desired location. But if you set the value to smooth, the browser will animate the scroll itself, creating a smooth and natural transition.

🪄 How to use it?

It couldn”t be simpler. Just add one line to your CSS file:

html {
  scroll-behavior: smooth;
}

And that”s it! Now any navigation through anchor links on your site will be smooth.

Example

Imagine you have this markup:

HTML

<nav>
  <a href="#section-1">Section 1</a>
  <a href="#section-2">Section 2</a>
</nav>
 
<div id="section-1" style="height: 100vh; background: #f0f0f0;">
  <h2>This is&nbsp;the first section</h2>
</div>
<div id="section-2" style="height: 100vh; background: #e0e0e0;">
  <h2>This is&nbsp;the second section</h2>
</div>

Without scroll-behavior: smooth, clicking on the “Section 2” link will instantly take you to the second block. With this property, the browser will smoothly scroll the page down.

✅ Why is this important?

Improved user experience (UX). Smooth scrolling helps the user maintain context. They see where the page is taking them and don”t feel lost.
A feeling of a “live” interface. Animations and smooth transitions make the site feel more modern and responsive. This is the “magic” that distinguishes a good site from a great one.
No JavaScript. Previously, this effect required writing several lines of JavaScript. Now it”s a native browser feature that works quickly and doesn”t require extra resources.
It”s incredibly simple. One line of code that breaks nothing, but only improves.

🏁 Conclusion

In modern web development, the devil is in the details. scroll-behavior: smooth is one of those details that costs you almost no effort, but brings huge benefits.