3

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.

Julian
  • 5,290
  • 1
  • 17
  • 40
Nigel
  • 985
  • 1
  • 11
  • 16

1 Answers1

4

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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • 1
    Yayy, it works if I add in that CSS! Im just not sure why it would work when I run the local server but will not work when its deployed. Thanks though :-) – Nigel Jul 26 '20 at 10:06