Any idea how to smooth scroll to elements from hash links?

[mattsears18]

I added a unique id to each featured project so that I can use a hash link for each one. https://github.com/mattsears18/mattsears18.com/blob/dab8b93519bfd9f5bf7c5ced3d93a891f7c91c5d/src/components/sections/featured.js#L364

I would like for a link like this: https://mattsears18.com/#nccer-single-sign-on to smooth scroll to the top of the element with that id, but the scrolling is not consistent. Sometimes it scrolls to exactly where I want, sometimes not. I'm not a Gatsby expert, but I think my problem has to do with the way that Gatsby loads the data. I.e. sometimes the element is loaded and can be scrolled to, sometimes not.

Any ideas for how to consistently scroll to an element from a hash link? I'm fine with adding a gatsby plugin if I need to.

[Moamal-2000]

Have you tried this?

html {
scroll-behavior: smooth;
}