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!

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);