Smooth scrolling

Widely available Reference ↗

Hash links and browser navigation can scroll smoothly without a JavaScript animation. One CSS property is usually enough.

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

element.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
});

Use JavaScript only when code initiates the movement. Respect reduced-motion preferences and avoid long scroll journeys that delay the user.