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.
```
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.