Eder Díaz blog


tips & tricks

Animated scroll without JS

November 24, 2023

When you have a one page site, you may want to have a smooth scroll to anchor links. This is a common pattern in sites, and it's easy to do with CSS.

You need three elements for this to work:

  • A link with an href attribute pointing to an element with an id attribute using #.
  • The element with the id attribute (make sure it’s the same as the href value without the #).
  • The css snippet below.
html {
  scroll-behavior: smooth;

No scrollIntoView or any JS needed! 🎉

❮ Back to list