Transform Your Website's UX With This One Liner

html {
  scroll-behavior: smooth;
}

If like me you've got a single page website and your using bookmarks (anchors tags that reference an element by id), allowing user to navigate to different sections of the website. Then you need to add this CSS property scroll-behavior: smooth;, which will smoothly scroll the page content into view.

Working Example

Below the CodePen demonstrates the smooth scrolling of the content when you click one of the navigation links.

Demo

Things To Note

The scroll-behavior property doesn't seem to work on the body element, so best to add it to the html element.

This property isn't currently support by all browsers, but this shouldn't stop you using it as it won't break and defaults to the standard behavior.

https://caniuse.com/#feat=mdn-css_properties_scroll-behavior