Back to all snippets
Library/CSS/Smooth Scrolling
cssbeginnerscrollbehaviorux

How to implement Smooth Scrolling in Css

Enable smooth scrolling behavior

Quick Answer

Add `scroll-behavior: smooth` to the `html` selector to make all anchor link jumps animate smoothly instead of snapping.

Code Snippet

1html {
2  scroll-behavior: smooth;
3}
4
5/* Hide scrollbar but keep functionality */
6.hide-scrollbar {
7  -ms-overflow-style: none;
8  scrollbar-width: none;
9}
10
11.hide-scrollbar::-webkit-scrollbar {
12  display: none;
13}

What is Smooth Scrolling?

Setting scroll-behavior: smooth on the html element makes all anchor link jumps animate smoothly instead of snapping instantly. The hide-scrollbar utility removes the visible scrollbar track without disabling scrolling, which is useful for custom-designed scroll containers.

How It Works

  1. 1`scroll-behavior: smooth` on `html` applies to the document's main scroll container.
  2. 2Anchor links (`<a href="#section">`) and `scrollIntoView()` both honour this setting.
  3. 3The hide-scrollbar snippet targets `::-webkit-scrollbar` for Chrome/Safari and `scrollbar-width: none` for Firefox.

Common Use Cases

  • Single-page sites - Smooth scroll to sections via anchor links
  • Table of contents - Smooth jump to headings in long articles
  • Scroll containers - Custom-styled panels without a visible scrollbar
  • Carousels - Hidden scrollbar for swipe-based image galleries

Key Benefits

  • One line of CSS for the most common use case
  • Respects prefers-reduced-motion when combined with a media query
  • Hide-scrollbar works across Chrome, Firefox, and Safari
  • No JavaScript required

Common Mistakes to Avoid

  • Setting `scroll-behavior: smooth` on a child element instead of the scrolling container — the scroll animation will not trigger.
  • Not providing a `prefers-reduced-motion` override — smooth scrolling can cause discomfort for vestibular disorder users.
  • Expecting hide-scrollbar to work without `overflow: auto` or `overflow: scroll` on the element.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more css examples

Frequently Asked Questions

Does scroll-behavior: smooth work with JavaScript scroll methods?

Yes, `scroll-behavior: smooth` affects `window.scrollTo()`, `element.scrollIntoView()`, and `element.scrollTop` assignments. You can also pass `{ behavior: 'smooth' }` directly to these methods for per-call control.

Related Snippets

css
beginner
Flexbox Centering
Center elements horizontally and vertically with flexbox
layoutflexboxcentering
css
beginner
Truncate Text
Truncate text with ellipsis for single and multiple lines
texttypographyutilities
css
intermediate
Glassmorphism Effect
Create frosted glass effect with backdrop blur
effectsmodernui

About This Css Code Snippet

This free css code snippet for smooth scrolling is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement smooth scrolling quickly and correctly.

All snippets in the Snippetly library follow css best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses css.

Tags: scroll, behavior, ux  | Language: css  | Difficulty: beginner  | Category: CSS

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets