# Smooth Scrolling in CSS with scroll-behavior and scroll-margin

URL: https://theosoti.com/short/smooth-scroll/
Published: 2025-07-03
Author: Theo Soti

> Enhance anchor navigation with smooth scrolling and better section spacing using pure CSS—no JavaScript required.

## Jumping straight to a section feels rough.

Smooth scrolling makes navigation feel effortless.

When users click an anchor link, the browser jumps abruptly to the section.
This can be jarring, especially on long pages.

Instead of relying on JavaScript for smooth scrolling, CSS has a built-in solution: “scroll-behavior: smooth”.
With just this, your page transitions fluidly between sections.

But what if the content feels too close to the edge?
By default, scrolling stops at the very top of the section, sometimes cutting off important content.

Fix this with `scroll-padding` or `scroll-margin`: scroll-margin-top: 20px;
Now, every scroll lands in a comfortable, readable position.

It’s lightweight, easy to implement, and widely supported (more than 95,5%).

Here's the codepen: https://codepen.io/theosoti/pen/KKOGJjZ

Native smooth scrolling works well for in-page links and table-of-contents navigation. Pair it with heading `scroll-margin` so anchors land with comfortable spacing below fixed interface chrome.

Native smooth scrolling is great for in-page navigation when motion remains subtle. Add heading offsets so anchor jumps feel intentional, not cramped under fixed UI chrome.

Run interaction tests with rapid clicks and navigation changes. Input should stay responsive even while transitions are active.

A practical way to adopt `scroll-padding` is to scope it to one high-impact component first. This keeps implementation predictable and prevents style drift as the codebase grows.

When using sticky headers, set heading-specific `scroll-margin-top` values so each section lands with consistent breathing room.

---

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!