← #114 Start a simple web server on macOS

Smooth scrolling with pure CSS

Topics: CSS

It's common to use anchors, <a href="#destination"> for example, to link between elements in a page. By default, the browser will jump straightly to the destination when clicking an anchor.

Without using any JavaScript library, it's possible to scroll to given element smoothly with a simple CSS property. Setting it to the html element enables smooth scrolling effect to the whole page:

html {
scroll-behavior: smooth;

We can also apply the style for a given scrollable container:

.container {
scroll-behavior: smooth;


Fix a typo or suggest an improvement
#116 Prevent anchor links from disappearing behind a sticky header