How to Make Smooth Scrolling Using Only CSS

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

<!-- 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
Copied to clipboard!

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:

// JavaScript equivalent for smooth scrolling
window.scroll({
  top: 100, 
  left: 0, 
  behavior: 'smooth'
});
scroll.js
Copied to clipboard!
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:

Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x 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.