Pure CSS Smooth Scrolling to Same-Page Anchor Hyperlinks Without Javascript

Question

On this hospital website there is a nice transition animation effect when clicking on a letter link, the jump to the selected anchor text has an easy smooth animation effect that brings the visitor down the page.

Using Chrome Devtools I'm unable to see what CSS transition effect they are using. I would like to learn this technique, and be able to do a CSS only transition effect, if possible, only for the vertical movement of the same-page anchors, preferably not animating anything else on the page, just the vertical movement to anchor scrolls.

HTML

<article>
<!-- Hyperlink -->
<a href="#LetterE">Scroll Down to letter E</a>


<!-- Anchor further down the page -->
<a name="LetterE"></a>


</article>

CSS:

article a{/* ?? */}

Thanks!

---

---

---

Update

Strange! When I override the "Smooth Scrolling" setting in Chrome v103's chrome://flags/ from [Default] to [Enabled], then smooth scrolling works and looks beautiful on both my website and the suggested example link in the comments! But when I return that setting value back to "Default" then it does not work, neither on my website nor on the suggested link! But it does work on the Hospital link above in this question!

Pneumoconiosis

Not sure what they are using, but the simple, modern, CSS-only way to achieve this, is developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior – Nifty

Thanks! Strange but on my Chrome v103 the smooth tile does not smoothen the scrool in that example?! There is no change between auto and smooth on my W64 Chrome?! – Pneumoconiosis

That is probably a (recently introduced) bug in Chrome then; the example works fine for me in a current Firefox, and both that site as well as caniuse.com/css-scroll-behavior report it should work in Chrome. – Nifty

@CBroe CBroe Updated my question with a strange and interesting find! – Pneumoconiosis

Answer 1

There's an css property called scroll-behavior. You can put it on html and all anchor will be called whit the defined animation.

In that case: html {scroll-behavior: smooth;}

The available values was:

• auto (instant jump in a blink of an eye)
• smooth (smooth '-')
• initial (browser's default)
• inherit (copy value from parent);

Echols