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:
Hints
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.