【问题标题】:Gatsby Smooth Scroll Anchor Links doesnt work when deployed to github pagesGatsby 平滑滚动锚链接在部署到 github 页面时不起作用
【发布时间】:2020-07-26 17:25:43
【问题描述】:

我有一个由几页组成的 Gatsby 网站。在导航栏上,有不同的链接。一些链接指向不同的页面,而一些链接会以流畅的滚动效果将您带到该页面上的特定部分。

为了实现这一点,我使用了 Gatsby 平滑滚动锚链接。文档在这里:https://www.gatsbyjs.org/packages/gatsby-plugin-anchor-links/

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

许多网站使用混合导航格式,其中一些链接路由到其他页面,而另一些则将平滑滚动锚定到特定页面中的部分 - 但无论用户在哪个页面,这两种类型仍然需要正常运行目前正在进行中。

这是我的导航栏代码的 sn-p:

             <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 页面时,它不再起作用了。它不是平滑滚动,而是直接传送到该部分。我添加了偏移选项和 StripHash 属性,但它仍然不起作用;不起作用。任何提示将不胜感激。

```

【问题讨论】:

    标签: javascript gatsby smooth-scrolling gatsby-plugin


    【解决方案1】:

    假设您已经按照看起来的方式正确配置了所有内容,并且您说它可以传送到各个部分(行为正确,效果不正确)我想您需要添加以下 CSS 规则以添加平滑行为:

    html,
    body {
      scroll-behavior: smooth;
    }
    

    Can I use 浏览器的后备。

    【讨论】:

    • 耶,如果我添加那个 CSS 就可以了!我只是不确定为什么它在我运行本地服务器时会起作用,但在部署时却不起作用。不过谢谢:-)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-25
    相关资源
    最近更新 更多