1

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!

enter image description here

Update

enter image description here

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!

Sam
  • 15,254
  • 25
  • 90
  • 145
  • 2
    Not sure what they are using, but the simple, modern, CSS-only way to achieve this, is https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior – CBroe Jun 30 '22 at 12:12
  • 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?! – Sam Jun 30 '22 at 12:28
  • 1
    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 https://caniuse.com/css-scroll-behavior report it should work in Chrome. – CBroe Jun 30 '22 at 12:41
  • @CBroe CBroe Updated my question with a strange and interesting find! – Sam Jul 01 '22 at 00:08

1 Answers1

3

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);
Sam
  • 15,254
  • 25
  • 90
  • 145
Modane
  • 31
  • 1