search

bchiang7 / v4

Fourth iteration of my personal website built with Gatsby
https://v4.brittanychiang.com/
MIT License
7.57k stars 3.77k forks source link

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

Open mattsears18 opened 2 years ago

mattsears18 commented 2 years ago

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 commented 7 months ago

Have you tried this?

html { scroll-behavior: smooth; }