1. css
  2. /properties
  3. /scroll-behavior



The scroll-behavior property determines the style of scrolling for a scroll container when the scrolling is activated by navigation or CSSOM scrolling APIs. Essentially, it can either give you a swift jump to the desired location or a smoother, more gradual one.

Examples and Usage

In the following example, we're illustrating how the scroll-behavior property can be leveraged to create a smoother scrolling transition within a navigational context.

HTML Structure

  <a href="#A">HTML</a>
  <a href="#B">CSS</a>
  <a href="#C">PHP</a>

<div class="scroll-container">
  <section id="A">HTML</section>
  <section id="B">CSS</section>
  <section id="C">PHP</section>

CSS Styling

/* Styling the navigation bar */
nav {
  background-color: #FBBF24; /* Navigation bar color */
  display: block; /* Block display */
  padding: 15px 0; /* Vertical padding */
  text-align: center; /* Centering text */
  width: 300px; /* Navigation bar width */

/* Styling the navigation links */
nav a {
  color: #FFFFFF; /* Link color */
  margin: 0 20px; /* Horizontal margins */
  text-decoration: none; /* Removing underline */

/* Styling the scroll container */
.scroll-container {
  background-color: #F0F8FF; /* Scroll container color */
  display: block; /* Block display */
  height: 300px; /* Scroll container height */
  width: 300px; /* Scroll container width */
  text-align: center; /* Centering text */
  overflow-y: scroll; /* Enabling vertical scroll */
  scroll-behavior: smooth; /* Setting smooth scroll behavior */

/* Styling the sections within the scroll container */
section {
  display: flex; /* Flex display */
  align-items: center; /* Vertical center alignment */
  justify-content: center; /* Horizontal center alignment */
  height: 100%; /* Full height */

In the setup above, the .scroll-container serves as our scrollable area with dimensions set to 300px by 300px purely for demonstration purposes. When a user clicks on a link in the navigation bar, they are smoothly scrolled to the corresponding section within the .scroll-container. This effect is controlled by the scroll-behavior property set to smooth.


autoThe default value. Enables instant scrolling between elements within the scroll container.
smoothEnables an animated and smooth scroll between elements within the scroll container, as defined by the user agent.

Tips and Tricks

  • It's important to note that the scroll-behavior property does not affect scrolls triggered by the user, it only applies to programmatic scrolls.

  • When scroll-behavior is set on the root element, it influences the viewport instead of it.

  • Applying scroll-behavior to the body element does not impact the viewport.

  • Keep in mind that browser support can be patchy for the scroll-behavior property, so always consider fallbacks or alternatives for specific unsupported, or partially supported browser versions.

Browser Compatibility

For a detailed breakdown of partial support nuances in specific browser versions, refer to the first link in the Useful Resources below.

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer

Caution: Early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: scroll-behavior

W3C's Editor's Draft of CSS Overflow Module Level 3: scroll-behavior