Use CSS Scroll Behavior for Animated Anchor Scrolls

Jhey Tompkins: [0:00] Here we have a page with some anchor tags that are pointing at headings on our page, which relate to these sections. By clicking an anchor tag, the browser will take us to that section. If we want to apply a transition to that navigation, we can use html { scroll-behavior: smooth; }. Now, when we click one of our anchor tags, the browser will transition that navigation.

[0:20] That's great, but what if you wanted to navigate through some inline search results? You'll get the transition each time, and that could get annoying for your users. To combat this, we can use the pseudo selector focus-within, and now the browser won't transition between our search results. However, now we've lost the transition when using the anchor text too.

[0:40] To fix that, we can use tabindex="-1" on each of our headings. Now, we have the navigation transitions back for our anchor tags. It's down to how you want to style the outlining, though. It's worth noting that these transitions aren't going to be suitable for everyone.

[0:57] We can use the media query prefers-reduced-motion to use scroll-behavior: auto. That's how we can use CSS to create animated anchor scrolling that respects users who prefer reduced motion and doesn't annoy users when they're trying to navigate for inline search results.

[1:14] In review, use scroll-behavior: smooth for animated anchor scrolling, but use the focus within pseudo selector, so that it isn't activated when users navigate inline search results. If we are going to use the focus within pseudo selector, we also need to apply a tabindex attribute with a value of -1 to the elements we are going to navigate to.

[1:33] To turn off the rule for those that prefer reduced motion, wrap the rule in a prefers-reduced-motion media query and set the scroll behavior to auto.