Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

animationsRauno

Smooth Scroll for Anchors

SHOULD

SHOULD: Use `scroll-behavior: smooth` for in-page anchors, with `scroll-margin-top` on targets so headings clear any sticky header.

Use scroll-behavior: smooth for navigating to in-page anchors with appropriate offset

html { scroll-behavior: smooth; }
:target { scroll-margin-top: 5rem; }

Bad

Good

Why it matters

Instant jumps to anchor links are disorienting — users lose context of where they are on the page. Smooth scrolling maintains spatial awareness and creates a more polished navigation experience.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.