[SOLVED] Gatsby Smooth Scroll Anchor Links doesnt work when deployed to github pages

Gatsby Smooth Scroll Anchor Links doesnt work when deployed to github pages

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.

Solution

Assuming that you have everything well configured as it seems and that you say that it teleports to the sections (the behavior is correct, the effect not) I guess you need to add the following CSS rule to add smooth behavior:

html,
body {
  scroll-behavior: smooth;
}

The fallback for the browsers at Can I use.