πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Make Smooth Scrolling Using Only CSS

How to Make Smooth Scrolling Using Only CSS

Ferenc Almasi β€’ 2020 November 18 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

If you want some smooth scrolling to happen without using an algorithm, you can use the CSS scroll-behavior property:

Copied to clipboard! Playground
<!-- Set the `scroll-behavior` property to create smooth scrolling -->
<style>
    html {
        scroll-behavior: smooth;
    }
</style>

<nav>
  <a href="#page-1">Scroll to page #1</a>
  <a href="#page-2">Scroll to page #2</a>
  <a href="#page-3">Scroll to page #3</a>
</nav>

<section id="page-1">Page #1</section>
<section id="page-2">Page #2</section>
<section id="page-3">Page #3</section>
smooth-scroll.html

Keep in mind this is only supported for modern browsers. You can check the working example at Codepen:

Check Smooth Scrolling on Codepen

If you want a JavaScript-based solution with a little bit more support, you can use the behavior option in window.scroll:

Copied to clipboard! Playground
// JavaScript equivalent for smooth scrolling
window.scroll({
  top: 100, 
  left: 0, 
  behavior: 'smooth'
});
scroll.js
How to add smooth scrolling only with CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.