How to Create a Smooth Scroll in CSS

What Is Smooth Scrolling?

Smooth scrolling is a technique that allows web pages to scroll smoothly rather than jumping to a new section immediately. This feature creates a fluid transition between anchor links or navigational actions, making the experience less jarring for the user.

It is especially beneficial in single-page applications (SPAs) and websites that heavily rely on navigational flows.

How Smooth Scrolling Enhances User Experience

Smooth scrolling is more than just a design flourish. It directly impacts how users perceive and interact with your website. By creating seamless transitions and reducing abrupt jumps, it enhances readability, flow, and overall satisfaction. Here are some key ways it improves the experience:

• Creates a Natural Flow: Instead of jarring jumps between sections, smooth scrolling mimics real-world motion, making navigation feel intuitive and effortless.
• Improves Content Readability: Gradual movement allows users to better track their position on the page, which is especially helpful when reading long-form content or navigating between anchors.
• Boosts Engagement: A polished scrolling effect can make a website feel modern and responsive, encouraging visitors to explore further.
• Enhances Visual Storytelling: Smooth transitions work well in narrative-driven or interactive websites, guiding users through content in a controlled and engaging way.
• Supports Consistency Across Devices: With careful implementation, smooth scrolling ensures that users get a cohesive experience on desktops, tablets, and mobile devices.
• Contributes to Professional Branding: Small interaction details like smooth scrolling signal attention to quality, making your website feel more refined and trustworthy.

What Is CSS Scroll-Behavior?

The CSS scroll-behavior property controls the scrolling behavior of an element’s content. It allows developers to customize the speed and vertical movement of scrolling within a certain container.

This property takes in two main values, which are auto and smooth.

auto

This is the scroll-behavior property’s default value. When set to auto, the browser reverts to its default scrolling behavior. When a scroll event or an anchor link is triggered, this usually causes an abrupt and instant scroll to the specified section.

/* Using auto (default behavior) */
.element-auto {
  scroll-behavior: auto;
}

smooth

When the CSS scroll-behavior property is set to smooth, it enables a smooth scrolling action. Scrolling becomes animated and gradual. Instead of jumping directly to the target location, the browser slowly transitions the scroll, resulting in a smooth effect. This is especially important for giving users a more comfortable and refined scrolling experience.

.element-smooth {
    scroll-behavior: smooth;
}

We also have other global values, which include:

With these additional values, you now have flexible options for customizing smooth scrolling behavior in CSS.

Browser Compatibility of CSS scroll-behavior

The scroll-behavior property is a reliable method to enable a smooth scroll in CSS. It is widely supported by modern browsers, which eliminates compatibility problems. However, it is still crucial to consider the browsing trends of your target audience and provide a consistent experience across multiple platforms.

The image above shows that while the scroll-behavior property is widely supported, it may have limitations in specific older browsers. Try using alternate smooth scrolling technologies or JavaScript-based options to ensure maximum compatibility.

Also, to ensure browser compatibility of your scroll behavior, you can leverage cloud-based testing platforms like TestMu AI.

It is an AI-native test execution platform that lets you perform live-interactive browser testing on a remote test lab of different browsers, devices, and operating systems. With TestMu AI, you can test scroll behavior on the latest and legacy web browsers online. This includes testing on Chrome browser online, Firefox browser online, Microsoft Edge online, Internet Explorer online, and more.

Subscribe to the TestMu AI YouTube Channel. Get real-time updates on various tutorials around automation testing and more.

Smooth Scroll With JavaScript

While scroll-behavior: smooth property can be used to add a basic smooth scroll in CSS, JavaScript allows more precise control and flexibility.

In this section, we’ll look at achieving smooth scrolling with JavaScript, continuing from the landing page example we explored earlier. We’ll look at the navigation links container within the navigation bar ( < nav >< /nav >).

HTML:

<div class="nav-links">
    <a href="#about">About</a>
    <a href="#browser-testing">Browser Testing</a>
    <a href="#real-device-testing">Real Device Testing</a>
</div>

Each anchor tag (< a >) contains a href element that specifies the ID of the linked section. For example, clicking the About link (< a href="#about">About< /a >) will smoothly scroll to the section with the ID about.

JavaScript:

Create a script.js file or place the JavaScript code within a < script > tag at the end of your HTML file, just before the closing < /body > tag.

const navLink = document.querySelectorAll('.nav-links a');

navLink.forEach(link => link.addEventListener('click', smoothScroll));

function smoothScroll(event){
  event.preventDefault();
  const targetId = event.currentTarget.getAttribute("href");
  window.scrollTo({
    top: document.querySelector(targetId).offsetTop,
    behavior: "smooth"
  })
}

Let’s break down the JavaScript code that enables smooth scrolling:

• const navLink = document.querySelectorAll(‘.nav-links a’); : This line selects all anchor tags (< a >) within the element with the class nav-links (presumably the navigation menu).
• navLink.forEach(link => link.addEventListener(‘click’, smoothScroll)); : This code iterates through each selected anchor tag and adds a click event listener. When a link is clicked, the smoothScroll function is triggered.

In the smoothScroll function:

• event.preventDefault(); : Prevents the default behavior of anchor tags, which is to abruptly jump to the linked section.
• const targetId = event.currentTarget.getAttribute(“href”); : Retrieves the ID of the target section from the clicked link’s href attribute.
• window.scrollTo({ … }) : This line is the core of the smooth scrolling functionality. It uses the window.scrollTo() method to scroll the page. The top: document.querySelector(targetId).offsetTop calculates the vertical distance (in pixels) from the top of the page to the target section’s top. behavior: “smooth” enables the smooth scrolling animation.

With this code in place, clicking on any navigation link will activate the smoothScroll function, resulting in a smooth transition to the corresponding section on the webpage.

Output:

A significant benefit of utilizing JavaScript over CSS is the ability to adjust the scroll speed to meet specific design needs. Let’s look at how we can leverage this flexibility and customize the scrolling behavior to our needs.

We’ll be working with the existing HTML code from our previous example. Only the JavaScript code will change. You can also view the complete code on CodePen.

const navLink = document.querySelectorAll('.nav-links a');

navLink.forEach(link => link.addEventListener('click', smoothScroll));

function smoothScroll(event) {
    event.preventDefault();
    const targetId = event.currentTarget.getAttribute("href");
    const targetElement = document.querySelector(targetId);

    const startingY = window.scrollY;
    const targetY = targetElement.offsetTop;
    const distance = targetY - startingY;

    let startTime = null;

    function animate(currentTime) {
        if (startTime === null) startTime = currentTime;
        const elapsedTime = currentTime - startTime;

        // Adjust the timing function and duration for speed control
        const ease = elapsedTime / 900; // Linear timing

        // Calculate newY considering both upward and downward scrolling
        const newY = startingY + ease * distance;

        window.scrollTo(0, newY);

        // Continue animation until targetY is reached
        if ((distance > 0 && newY < targetY) || (distance < 0 && newY > targetY)) {
            requestAnimationFrame(animate);
        }
    }

  requestAnimationFrame(animate);
}

The JavaScript code selects all navigation links inside .nav-links, and when any link is clicked, it prevents the default jump behavior and instead triggers a smooth scroll animation.

The animation is handled using requestAnimationFrame, which progressively scrolls the page toward the target element by calculating the distance and easing it over time. The use of window.scrollTo() updates the scroll position in each animation frame until the target is reached, ensuring a smooth visual transition.

Output:

The smooth scrolling animation in the example above appears to be slower because the ease value in the code is set to 900; a higher ease value results in a slower transition. You can change this value to set the appropriate animation speed.

In conclusion, a smooth scroll in CSS is an excellent choice for a quick and straightforward setup. However, JavaScript offers greater flexibility and control when tailoring the animation or targeting certain items.

Performance Considerations in Smooth Scrolling

When implementing smooth scrolling, performance should always be a priority. A smooth experience is only valuable if it doesn’t compromise your site’s speed, responsiveness, or accessibility. Here are some key points to consider:

• Optimizing Performance for Better User Experience: Smooth scrolling should not hinder your site’s performance. Overuse of animations and large background images can lead to slower rendering, especially on mobile devices. Optimizing images, deferring non-essential JavaScript, and ensuring that you’re using requestAnimationFrame for animations can reduce the strain on the browser.
• Minimizing Resource Consumption: Another performance consideration is the optimization of resource-heavy elements like videos and animations. Use lazy loading for images, defer offscreen content, and reduce the overall complexity of your page. This approach will help maintain the smooth scrolling experience even on resource-constrained devices.
• Test Across Devices and Browsers: Performance can vary greatly depending on the device and browser. Always test smooth scrolling on both low-end and high-end devices to ensure consistent results.
• Limit DOM Reflows and Repaints: Heavy DOM manipulation during scroll events can cause noticeable lag. Use throttling or debouncing techniques to minimize scroll-triggered calculations.
• Use Hardware Acceleration: Leveraging CSS properties like transform and opacity instead of manipulating layout-heavy properties (like top or left) can shift work to the GPU, resulting in smoother animations.
• Monitor with Performance Tools: Utilize browser DevTools, Lighthouse, or Core Web Vitals to measure the impact of smooth scrolling and optimize accordingly.

Advanced Smooth Scrolling Techniques

Once the basics of smooth scrolling are in place, you can enhance user experience with advanced techniques. These methods give you greater control, create more polished interactions, and make your design feel intentional. Here are some useful approaches:

• Scroll Snapping: Scroll snapping is a technique where scrolling is controlled, and the user is “snapped” to specific sections. This is especially useful for image carousels, multi-section landing pages, or slideshows. With properties like scroll-snap-type and scroll-snap-align, you can create a grid or linear snapping effect.

.container {
    scroll-snap-type: y mandatory;
}
.section {
    scroll-snap-align: start;
}

• Easing Functions and Animation Control: Easing functions allow you to control the acceleration and deceleration of the scroll. For example, easing out makes the scroll start fast and then slow down. This can be applied with both CSS and JavaScript, giving designers more control over the user experience.
• Custom JavaScript Scroll Effects: Beyond CSS, you can use JavaScript libraries (like GSAP or Locomotive Scroll) to build advanced scrolling effects such as parallax, inertia-based motion, or scroll-triggered animations.
• Combining Smooth Scrolling with Parallax: Parallax scrolling creates depth by moving background elements at a slower rate than foreground content. When combined with smooth scrolling, it produces an immersive storytelling experience.
• Directional and Conditional Scrolling: Some modern designs use horizontal or diagonal scrolling instead of traditional vertical motion. Conditional logic (e.g., locking scrolling until animations finish) can also guide users through a structured flow.
• Accessibility Considerations: Always provide fallbacks for users who prefer reduced motion (prefers-reduced-motion media query). Advanced techniques should not come at the cost of usability.

Smooth Scrolling and Accessibility

A smooth scroll in CSS can add a touch of polish to your website and improve the user experience. However, it is crucial to consider accessibility when integrating this functionality. Uncontrolled smooth scrolling can pose difficulties for people with impairments.

Users who are sensitive to motion or have vestibular disorders may experience nausea or dizziness due to abrupt or excessive scrolling animations. Fluid scrolling animations may be difficult for individuals who use keyboards to navigate. Excessive or rapid scrolling can impair their ability to focus on certain page components, making it difficult to navigate and retrieve content.

Furthermore, unexpected scrolling motions might break the flow of information for screen reader users, making it difficult to understand the web page layout.

To improve accessibility, scrolling animations should not interfere with the screen reader’s ability to interpret and communicate content properly.

Providing a consistent and predictable scrolling experience can significantly improve the accessibility of your website for all users. To ensure web accessibility, you can use the TestMu AI platform to perform accessibility testing at scale across 3000+ real environments. Plus, you can leverage the accessibility extension offered by TestMu AI, i.e., Accessibility DevTools Chrome extension, to run quick and hassle-free accessibility tests.

Conclusion

In this blog on adding a smooth scroll in CSS, we discovered a simple yet effective approach to improving the user experience on our web pages. A smooth scroll provides a touch of elegance, making CSS transitions between sections more visually appealing and user-friendly.

Remember that successful implementation is more than simply the code; it also requires careful design considerations. A smooth scrolling experience is made possible by semantic HTML, consistent section heights, and fine-tuned scroll behavior. We’ve also prioritized accessibility, progressive enhancement, and explanations to offer a complete and inclusive solution.

As technology advances and user expectations change, the art of seamless scrolling will continue to play an important part in designing future digital experiences.

Citations

• Smooth Scrolling: https://css-tricks.com/snippets/jquery/smooth-scrolling/
• Scroll Behavior: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
• Scrolling behaviour with single and multi-column layout:https://www.researchgate.net/publication/221023815