Two different things get called smooth scroll. One is jumping to an anchor without the snap. The other is giving the whole page inertia, so it glides a little after you stop. The first is one line of CSS; the second is a library, and a decision.
Smooth scroll to an anchor with CSS alone: scroll-behavior: smooth
html {
scroll-behavior: smooth;
scroll-padding-block-start: 5rem; /* clears a sticky header */
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}That is the whole thing for anchor links. scroll-padding is the part people forget: without it the section you jump to ends up hidden under a sticky header.
Smooth scroll in JavaScript: window.scrollTo, scrollIntoView and animating scrollTop
window.scrollTo({ top: 0, behavior: "smooth" }) and el.scrollIntoView({ behavior: "smooth" }) do the same job from code, which is what you want for a scroll-to-top button or a step-by-step form.
Speed and easing: why there is no scrollTo speed option, and what to do instead
There is no duration parameter: the browser decides. If you need a specific speed or easing you animate scrollTop yourself with requestAnimationFrame — which is, in essence, what a smooth scroll library is doing for the whole page.
Smooth scroll libraries compared: Lenis vs Locomotive Scroll vs GSAP ScrollSmoother
| Library | How it works | Watch out for |
|---|---|---|
| Lenis | Intercepts the wheel and animates the real page scroll | Small; the common choice today |
| Locomotive Scroll | Historically moved a wrapper instead of the page | Its v5 rewrite is built on Lenis and scrolls natively; older versions and tutorials still wrap |
| GSAP ScrollSmoother | Smoothing on top of GSAP | Needs GSAP and ScrollTrigger, and wraps your content to translate it |
The detail that matters most is the one in the middle column: a library that scrolls a wrapper instead of the page breaks everything that depends on the real scroll: position: sticky, anchor links, and any scroll-driven animation you add later.
And if you are weighing GSAP for the animations themselves and not just for the smoothing, the library comparison covers that side of it.
Why Fancy Animations ships Lenis, and how it keeps position sticky working
That is why the plugin integrates Lenis and not a wrapper-based library: the page itself still scrolls, so sticky sections, anchors and the plugin’s own scroll animations keep working. It is off by default, and the settings expose the wheel sensitivity, the gesture direction and the easing — plus, depending on which easing you pick, either a scroll duration or a lerp factor. You can also write your own easing function.
Scrolljacking: what it is, why users hate it, and how to add inertia without hijacking the scroll
Scrolljacking is when the site takes the scroll away from the reader: one wheel turn jumps a whole screen, or the page refuses to move while an animation finishes. Inertia is not scrolljacking: the difference is whether the reader is still in control of distance and direction.
Three rules keep you on the right side: never swallow a wheel turn, keep the inertia short enough that stopping feels immediate, and respect prefers-reduced-motion.
Browser quirks: Safari, Chrome, iOS and overflow scrolling with position fixed
Touch devices already have their own inertia from the operating system, so adding more on top is where phone scrolling starts to feel wrong. Many sites turn smooth scroll off below a breakpoint for exactly that reason.
Auto-scrolling websites and kinetic scroll: when motion should not depend on the user
A page that scrolls by itself is a different thing again, and it is almost always a mistake outside a kiosk or a screensaver: it takes away the one control the reader expects to have.
Smooth scroll in Bricks without code: anchor links, Lenis and the settings that matter
Do it without code
Lenis, as a switch and half a dozen settings
Smooth scroll is a setting: turn it on, pick an easing, then tune the wheel sensitivity and either a scroll duration or a lerp factor — the lerp factor only appears when you pick Lerp, and the duration greys out when you do. No library to install, and sticky sections keep working.
Off by default
Go further: smooth scroll (Lenis) for Bricks, Etch and Gutenberg
Smooth scroll has the settings live, and sticky scenes and stacked cards is the kind of scene that a wrapper-based library would have broken.
How do I make scrolling smooth on my website?
For anchor links, one line of CSS: scroll-behavior: smooth. For inertia across the whole page you need a library such as Lenis; in Bricks the Fancy Animations plugin turns it on from a setting.
What does scroll-behavior do?
It tells the browser to animate jumps triggered by anchor links or scrollTo instead of snapping. It does not add inertia to the user’s own wheel or touch scrolling.
Which is the best smooth scroll library?
Lenis is small and keeps the real page scrolling, which is why sticky sections survive. Locomotive bundles more features and more weight, and GSAP ScrollSmoother needs GSAP loaded.
Is smooth scrolling safe for accessibility and SEO?
Yes when the native scroll is not hijacked and inertia is moderate. Scrolljacking, where the site takes over the wheel, is the thing to avoid; content and anchors stay indexable either way.
Does smooth scroll break position sticky or anchor links?
Some libraries do, because they move a wrapper instead of the page. Lenis as integrated in Fancy Animations keeps sticky sections and anchors working.
Can I set the speed of window.scrollTo?
Not directly: the browser controls the duration of smooth scrollTo. For a custom speed you animate scrollTop yourself with requestAnimationFrame, or let a library do it.