Smooth Scrolling In HTML

To enable smooth scrolling on your site you just need to add one line of CSS.

html {
  scroll-behavior: smooth;
}

When a user clicks an anchor link within the page (eg. <a href="#some-link">) the user will be smoothly taken to that section of the page. There's no need to add any JavaScript libraries to get this working, it will work out of the box on all browsers.

There is one niggle, if you have a container with a fixed height then you need to add the same CSS rule to that container to enable CSS scrolling for that container.

html {
  scroll-behavior: smooth;
}

div.container {
  height: 7rem;
  overflow: auto;
  scroll-behavior: smooth;
}