Free Smooth Scroll Nav for One-Page Sites

Tested by TNT Review — record TNT-TEST-2026-10-05-022, 5 October 2026. We loaded the demo in a real browser, clicked a nav link, and measured where the page actually scrolled to. See Verification.

The problem

A one-page site’s nav links jumping instantly to each section works, but feels abrupt compared to a smooth scrolling animation — and a lot of guides reach for a JavaScript library to add that, when every modern browser already supports it natively with one line of CSS.

Expected outcome

By the end of this guide you will have smooth-scrolling anchor navigation on a one-page site, with zero JavaScript.

Requirements and costs

Any static site.
Cost: free.

Step-by-step implementation

Add one line of CSS:
```
html { scroll-behavior: smooth; }
```

Use normal anchor links in your navigation, pointing at section ids:

<nav>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

Give each section a matching id:
```
<section id="about">...</section>
```
That’s it. No JavaScript, no library — clicking the link now animates the scroll instead of jumping instantly.

A real example

Clicking an “About” link scrolled the page from the very top (scroll position 0) down to exactly where the About section begins — smoothly, not an instant jump, with the section landing right under the fixed nav bar.

Verification and troubleshooting

What we tested, on 5 October 2026 (record TNT-TEST-2026-10-05-022): loaded the demo in a real browser (starting scroll position: 0), clicked the “About” nav link, waited for the scroll to settle, then measured both the page’s new scroll position (1212px) and the About section’s actual position in the viewport (44px from the top, just under the fixed nav) — confirming the click genuinely scrolled to the right place, not just that the URL hash changed.

Troubleshooting:

It still jumps instantly instead of scrolling smoothly. Check scroll-behavior: smooth is set on html (not just the body), and that no other CSS later in your stylesheet overrides it back to auto.
The target section is hidden behind a fixed header after scrolling. Add scroll-margin-top (matching your header’s height) to your section elements — this tells the browser to stop that much short of the very top.
You need it to work in very old browsers. scroll-behavior has been supported in all major browsers for years; if you genuinely need to support something ancient, a small JS polyfill exists, but check your actual visitor data before adding that complexity.

Limitations and alternatives

This is CSS-only, so it can’t do anything more advanced than “scroll to this element” — no custom easing curves, no scroll-triggered animations along the way. For those, a JavaScript scroll library is the right tool; for the common “nav link scrolls smoothly to a section” case, it’s not necessary.

What to do next

Test every nav link on an actual phone, not just by resizing a desktop browser window — a fixed header’s exact height, and the scroll-margin adjustment it needs, often looks fine on desktop and still overlaps the target section on a smaller real device.

How to Add Smooth Scroll Navigation to a One-Page Website for Free