Workshop context

  • In the previous five workshops, you created and displayed a table of contents that links to each of the the MDX blog headings.
  • There are no more workshops in the series – this is the last one!

Workshop goal

By the end of this workshop:

  • Clicking on a heading in the table of contents should scroll the blog content so that heading is 1 rem below the header.
  • If the user has ‘prefers-reduced-motion’ set to ‘no-preference’, then the page should scroll smoothly to the place the heading at the top of the content area.
  • If the user’s ‘prefers-reduced-motion’ value is set to ‘reduce’, then the behavior should be the same as at the end of the last workshop: the content should jump immediately to the scroll position with no animation.

Here’s a video of what scrolling should look like for someone who doesn’t have prefers-reduced-motion set to reduce:


Hint 1 Add a scroll-margin-top value to the .heading class in BlogHeading.module.css. The value for the scroll-margin-top property will be the same as the value for the table of contents sticky positioning top in Workshop 3.

Hint 2 For smooth scrolling across the entire app, add scroll-behavior: smooth to the :root element in src/app/globals.css.

Hint 3 Use a prefers-reduced-motion media query to restrict the smooth scrolling to users who do not have a prefers-reduced-motion value of reduce.

Hint 4 To check to see whether you’ve disabled smooth scrolling for users who prefer reduced motion, you can emulate prefers-reduced-motion in Chrome or enable reduced motion for your environment.