Table of Contents
Years ago, achieving smooth scrolling required either Javascript or jQuery. Now, we have a way to implement it natively using CSS.
Add the following to the <html> element:
html { scroll-behavior: smooth;}This will enable smooth scrolling for the whole page. However, it is also possible to apply it to a specific element or container in your website.
One of the most common use cases for smooth scrolling is for the Scroll to top button or element you find while scrolling to the bottom of a website. This method is also especially useful for Table of Contents modules for articles/blog posts.
Smooth scrolling example: Anchor navigation
In the following example, I used three anchor links that scroll to different sections of the content. This provides a visual way of seeing the smooth scrolling animation in action.
Cross Browser Compatibility
According to Can I use?, this method is currently available for all major browsers (Chrome, Edge, Safari, Firefox and Opera).
Ever since this CSS method became available, this is one of the first lines of CSS I write when creating a new website environment.
What would you use it for?
Question time: Have you used CSS Smooth Scrolling? What has been your use case for it? Feel free to connect with me on any of my outlets and let me know!