Unable to Scroll to Div using <a href=“#”>]
Opened this issue · 5 comments
I'm using this library to get the scroll to div effect.However after following the documentation ,I don't seem to get it working.Code :
<RewardContainer>
<div className="pageWrapper">
<div className="rewardInfoWrapper">
<div className="tabsContainer">
<div>
<Scrollspy
items={[
"section-1",
"section-2",
"section-3"
]}
currentClassName="is-current"
>
<li>
<a
href="#section-1"
className="c-side-nav__link"
>
Streak
</a>
</li>
<li>
<a
href="#section-2"
className="c-side-nav__link"
>
Gems
</a>
</li>
<li>
<a
href="#section-3"
className="c-side-nav__link"
>
Xp Points
</a>
</li>
</Scrollspy>
</div>
</div>
<div className="columnContainer">
<div className="tabInfo">
<div>
<div id="section-1">
<p>
This is Section 1
</p>
</div>
<div id="section-2">
<p>
This is Section 2
</p>
</div>
<div id="section-3">
<p>
This is Section 3
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</RewardContainer>
The issue is ,my a href="#id" tag reloads the browser and treats id as a route instead of scrolling to that div's id.For instance,clicking on the third li element reloads the browser with http://localhost:7000/#section-3 in the url.
If you're using react-router you'll need to also use react-router-hash-link: https://github.com/rafrex/react-router-hash-link. Just install, import then replace <a href="#achor">...</a> with <HashLink to="#anchor">...</HashLink> and all should be good!
@Technologeek Did you find any work around for this? I am also having this issue. When the browser reloads, it does not scroll to the desired section, rather scrolls to top.
@smshahrukh I haven't really tried out router-hash-link as suggested above.Did you give that a try ?
@Technologeek Yes I tried but it is of no use. It just give you a smooth scroll to the element. It doesn't provide the desired functionality.
Can confirm that react-router-hash-link solves the issue. This is not an issue with ScrollSpy, but an issue in general if you're using HashRouter.