What is smooth scrolling on forms and what effects can this behavior have on users?

[GnatalieH]

I'm hoping @1Copenut can more eloquently explain this, but not all users prefer the "smooth scrolling" behavior that happens when they navigate to the next page on a form (getting bumped back to the top of the page). There is an iOS setting for "reduced motion" that may also come into play with this behavior.

[1Copenut]

Sure thing @GnatalieH ! The smooth scrolling effect (IE, watching grass and trees go by while looking out the car window) could cause some users to experience dizziness, nausea, or other side effects. Most operating systems now offer a prefers-reduced-motion option in the system preferences or settings. I'd like to consider checking for this setting in our scroll to top UI helper.

I believe we could do this with a one-line JavaScript check:

const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

If the prefers-reduced-motion was evaluated to true, we could change the duration: 0 and smooth: false to override the smooth scrolling effect for a "jump cut" instant move.

More on the window check: https://since1979.dev/respecting-prefers-reduced-motion-with-javascript-and-react/