CssHow-ToBeginner · 3 min read

How to Use Smooth Scroll in CSS for Smooth Page Navigation

To enable smooth scrolling in CSS, use the scroll-behavior property with the value smooth on a scroll container or the html element. This makes the page scroll smoothly instead of jumping instantly when navigating to anchors or using JavaScript scroll methods.

📐

Syntax

The scroll-behavior property controls the scrolling animation. It accepts two main values:

auto: The default, scrolls instantly.
smooth: Scrolls smoothly with animation.

You apply it to an element that can scroll, often the html or body element for the whole page.

css

scroll-behavior: smooth;

💻

Example

This example shows smooth scrolling when clicking links that jump to sections on the page. The html element has scroll-behavior: smooth; so the page scrolls gently instead of jumping.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Smooth Scroll Example</title>
<style>
  html {
    scroll-behavior: smooth;
  }
  section {
    height: 100vh;
    padding: 2rem;
    border-bottom: 1px solid #ccc;
  }
  nav {
    position: fixed;
    top: 0;
    background: white;
    width: 100%;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  nav a {
    margin-right: 1rem;
    text-decoration: none;
    color: #007acc;
    font-weight: bold;
  }
</style>
</head>
<body>
<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
  <a href="#section3">Section 3</a>
</nav>
<section id="section1">
  <h2>Section 1</h2>
  <p>This is the first section.</p>
</section>
<section id="section2">
  <h2>Section 2</h2>
  <p>This is the second section.</p>
</section>
<section id="section3">
  <h2>Section 3</h2>
  <p>This is the third section.</p>
</section>
</body>
</html>

Output

A webpage with a fixed top navigation bar containing links to three full-screen sections. Clicking a link smoothly scrolls the page to that section.

⚠️

Common Pitfalls

Some common mistakes when using smooth scroll in CSS include:

Applying scroll-behavior to elements that do not scroll, so no effect is seen.
Expecting smooth scroll to work on all browsers; older browsers may not support it.
Using JavaScript scroll methods without considering CSS smooth scroll, which can cause conflicts.
Not setting scroll-behavior on the correct container (usually html or the scrollable container).

css

/* Wrong: applying to a non-scrollable element */
body {
  scroll-behavior: smooth;
}

/* Right: apply to html for full page scroll */
html {
  scroll-behavior: smooth;
}

📊

Quick Reference

Use this quick guide to remember how to enable smooth scrolling:

Property	Value	Effect
scroll-behavior	auto	Instant jump to target (default)
scroll-behavior	smooth	Smooth animated scroll to target
Applicable to	html, body, scroll containers	Controls scrolling animation on these elements

✅

Key Takeaways

Use scroll-behavior: smooth; on the html element to enable smooth scrolling for the whole page.

Smooth scroll only works on scrollable containers; applying it to non-scrollable elements has no effect.

Not all browsers support smooth scroll, but modern browsers do.

Avoid conflicts by coordinating CSS smooth scroll with JavaScript scrolling methods.

Test smooth scroll on your page to ensure it behaves as expected.