Smooth scrolling in React, using Effects Hooks

There’s a bunch of outdated info on the web about this, and this ended up being really easy.

Put this wherever you put reusable functions:

const scrollToTop = () => document.getElementById('root').scrollIntoView();

And put this in the components / functions you want the scrollToTop effect to work on:

useEffect(() => { scrollToTop() }, []);

And put this in your CSS:

html { scroll-behavior: smooth }
Charlie Park @charliepark