0

I am trying to create a smooth scrolling page on a gatsby site. If the user clicks on a link in the menu, the website scrolls to a section with a matching id on the same page. The scrolling itself works without any problem. But I also want, that if the user just scrolls through the page - without clicking the links - the URL in the browser should update with hashes used in the section ids. e.g. website.com/#section1, website.com/#section2 etc. None of the plugins I tried could do this so far:

It seems to me that all of this plugin promise this feature, but it does not work for me. Maybe Gatsby needs some extra configuration to make this work?

foxeyyy
  • 19
  • 6
  • This is a JS/browser API called [History](https://developer.mozilla.org/en-US/docs/Web/API/History). As long as you're only changing the fragment, there isn't anything specific to React or Gatsby to consider. – coreyward Sep 04 '20 at 15:23
  • Here's another example: https://stackoverflow.com/a/39276694/203130 – coreyward Sep 04 '20 at 15:29
  • @coreyward , thank you for your answer, it did help me, but its not the answer that I was looking for. I can now update the URL in the browser, but I still can not detect the id of the div (of the section) that I am currently scrolling through. Actually I am looking for a solution with a react or gatsby plugin that can do that out of the box. If that does not exist, probably I could write a script for that, but I strongly prefer a working plugin. – foxeyyy Sep 06 '20 at 07:55
  • Again, though, none of this is specific to Gatsby. Any React-based in-view library will do. – coreyward Sep 06 '20 at 22:40
  • @coreyward can you please name one? – foxeyyy Sep 07 '20 at 09:32
  • Technically this is out-of-scope for StackOverflow FYI. I use [this library](https://github.com/thebuilder/react-intersection-observer) a lot. It’s not going to do the work of modifying the fragment for you when something is in view, but the links I shared above should help you handle that part. If you get stuck, post a new question and share the code. :) – coreyward Sep 07 '20 at 17:02

0 Answers0