Gatsby 平滑滚动锚链接在部署到 github 页面时不起作用

Question

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.

```

Answer 1

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 .