[英]Anchor links from external pages don't work when using jQuery smooth scrolling code
[英]Gatsby Smooth Scroll Anchor Links doesnt work when deployed to github pages
我有一个由几页组成的 Gatsby 网站。 在导航栏上,有不同的链接。 一些链接指向不同的页面,而一些链接会将您带到该页面上的特定部分,并具有平滑的滚动效果。
为此,我使用了 Gatsby 平滑滚动锚链接。 文档在这里: https://www.gatsbyjs.org/packages/gatsby-plugin-anchor-links/ 。
这基本上是我试图实现的目标:
许多网站使用混合导航格式,其中一些链接路由到其他页面,而一些链接将平滑滚动锚定到特定页面中的部分 - 但无论用户当前在哪个页面上,这两种类型仍然需要 function 很好。
这是我的导航栏代码片段:
<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中浏览器的后备方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.