search

rafgraph / react-router-hash-link

Hash link scroll functionality for React Router
https://react-router-hash-link.rafgraph.dev
MIT License
734 stars 62 forks source link

<NavHashLink to='/'>Home</NavHashLink> does not scroll to the top of the page when clicked after a hash link #49

Closed Vidit92 closed 4 years ago

Vidit92 commented 5 years ago

<Link to="/">Home</Link> <Link smooth to="/#sectiontwo">Two</Link> <Link smooth to="/#sectionthree">Three</Link>

The link to the hash is working perfectly, but after I have scrolled to the hash and when I click Home it is expected to scroll back to the top, but nothings happens.

Please help, me find the solution to these problem. CodeSandbox: https://codesandbox.io/s/busy-sinoussi-7w73c

rafgraph commented 4 years ago

That's because there's no hash for it to scroll to when you click Home. Whenever you want to scroll, the element you want to scroll to has to have an id that matches the hash in the link. You could add a id="home" to the top element, and use <Link to="/#home">Home</Link> for the link.