How to Make Smooth Scrolling Using Only CSS

<!-- 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>

// JavaScript equivalent for smooth scrolling
window.scroll({
  top: 100, 
  left: 0, 
  behavior: 'smooth'
});