I have a Gatsby website which consist of a few pages. On the navbar, there are different links. Some links point to different pages while some links will bring you to that particular section on that page with a smooth scrolling effect.
TO achieve this, I used Gatsby smooth scroll anchor links. Documentation is here: https://www.gatsbyjs.org/packages/gatsby-plugin-anchor-links/.
This is basically what Im trying to achieve:
Many sites use a mixed navigation format in which some links route to other pages, while some anchor a smooth scroll to sections within a specific page — but both types still need to function well regardless of what page the user is currently on.
Here's a snippet of my navbar code:
<MDBNavItem className="mr-4">
<AnchorLink to="/#buy-now"
title="Buy AIEOU">
<span>Buy AIEOU</span>
</AnchorLink>
</MDBNavItem>
<MDBNavItem className="mr-4">
<AnchorLink to="/about" title="Our team">
<span>About Us</span>
</AnchorLink>
</MDBNavItem>
What's odd is that it totally works fine when I use it locally. But it doesnt work anymore when I deploy it to Github pages. Instead of the smooth scrolling, it just teleports to that section instead. I added the offset options and also the StripHash attribute but it still doesn;t work. Any tips would be appreciated.