Question

我有一个包含几页的盖茨比网站。在导航栏上，有不同的链接。有些链接指向不同的页面，而有些链接会将您带到该页面的该特定部分，并具有平滑的滚动效果。

要实现这一目标，我使用了盖茨比平滑滚动锚链接。文档在这里：https://www.gatsbyjs.org/packages/gatsby-plugin-anchor-links/。

这基本上是我要实现的目标：

许多站点使用混合导航格式，其中某些链接会路由到其他页面，而某些站点会将平滑的滚动锚定到特定页面内的各个部分，但是无论用户是哪个页面，这两种类型仍需要正常运行当前。

以下是我的导航栏代码段：

             <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>

奇怪的是，当我在本地使用它时，它完全可以正常工作。但是当我将其部署到Github页面时，它不再起作用。它没有平滑滚动，而是仅传送到该部分。我添加了offset选项以及StripHash属性，但仍然无法正常工作。任何提示将不胜感激。

```

Answer 1

假设您的所有配置看上去都很好，并且您说它已经传送到各个部分（行为正确，效果不正确），我想您需要添加以下CSS规则来添加平滑行为：

html,
body {
  scroll-behavior: smooth;
}

位于Can I use的浏览器的后备。

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

1 个答案: