CSSScrollJavaScriptUX

Smooth Scroll in CSS & JavaScript: Complete Implementation Guide

Browser-native smooth scrolling has matured. Learn scroll-behavior CSS, JavaScript scrollIntoView, anchor navigation, progress indicators, and the Scroll Timeline API.

U

UIXplor Team

February 25, 2026 · 5 min read

✦

01CSS scroll-behavior

One line enables smooth scrolling for all anchor navigation:

css
html { scroll-behavior: smooth; }

Now clicking `<a href="#section">` scrolls smoothly. Always pair with `prefers-reduced-motion`:

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

02scroll-margin-top for Fixed Headers

When you have a fixed navbar, anchor targets scroll behind it. Fix with:

css
[id] { scroll-margin-top: 80px; } /* height of your navbar */

/* Or per-element */
.section { scroll-margin-top: 96px; }

This offsets the scroll position so the heading appears below the fixed header.

03JavaScript scrollIntoView

For programmatic scrolling:

js
document.getElementById('target').scrollIntoView({
  behavior: 'smooth',
  block: 'start',    // 'start' | 'center' | 'end'
  inline: 'nearest'
});

Detect reduced motion preference:

js
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
element.scrollIntoView({ behavior: prefersReduced ? 'instant' : 'smooth' });

04Reading Progress Indicator (Pure CSS)

css
@keyframes progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: #B8FB3C;
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll(root);
}

This uses the Scroll Timeline API — no JavaScript needed.

Related UI Components

◈

Collections

All UI component collections

⚡

Micro Interactions

Ripple, tilt, glow interactions

Back to Blog