javascript - Gatsby 平滑滚动锚链接在部署到 github 页面时不起作用
问题描述
我有一个由几页组成的 Gatsby 网站。在导航栏上,有不同的链接。一些链接指向不同的页面,而一些链接会将您带到该页面上的特定部分,并具有平滑的滚动效果。
为此,我使用了 Gatsby 平滑滚动锚链接。文档在这里: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 页面时,它不再起作用了。它不是平滑滚动,而是直接传送到该部分。我添加了偏移选项和 StripHash 属性,但它仍然不起作用;不起作用。任何提示将不胜感激。
```
解决方案
假设您已经按照看起来的方式正确配置了所有内容,并且您说它传送到各个部分(行为正确,效果不正确)我想您需要添加以下 CSS 规则以添加平滑行为:
html,
body {
scroll-behavior: smooth;
}
Can I use中浏览器的后备方案。
推荐阅读
- hibernate - Spring JPA/HIbernate:重复键值违反唯一约束
- botframework - 如何仅在您要讲话时激活和停用网络聊天中的麦克风?我想通过网络聊天控制关闭和开启
- c# - 如何从另一个页面检查页面中gridview内的复选框并刷新页面
- c# - 以有效的方式从随机位置以复合模式构建层次结构
- sql - 对表的每一行逐一进行特定查询
- laravel - Laravel - 在调用另一个函数的函数中使用请求
- node.js - 剧作家隐身
- terraform - 进行 terraform destroy 时无法解码当前后端配置错误
- c# - C# 异步 REST 查询不起作用:WaitAll 或 WhenAll 结合 .Result 挂起
- python - 在 textinfo 注释内进行情节更改