我正在使用 Gatsby 2.2.10 设置网站，并且链接组件保留上一页的滚动位置，并且在单击它们时不会滚动回顶部。
<div className="Footer__legal body">
<p>© {new Date().getFullYear()} My Nice Company</p>
<Link to="/privacy-policy">Privacy Policy</Link>
<Link to="/page-2">Page 2 Link component</Link>
</div>
预期行为：
当您单击“隐私政策”、“第 2 页”或网站底部的任何页面时，我希望页面加载时用户回到顶部。
实际行为：
用户停留在当前页面的滚动位置
您还可gatsby-browser.js以为每个滚动更新修改和实现一个钩子：
// in gastby-browser.js
exports.shouldUpdateScroll = ({
routerProps: { location },
getSavedScrollPosition,
}) => {
const { pathname } = location
// list of routes for the scroll-to-top-hook
const scrollToTopRoutes = [`/privacy-policy`, `/page-2`]
// if the new route is part of the list above, scroll to top (0, 0)
if (scrollToTopRoutes.indexOf(pathname) !== -1) {
window.scrollTo(0, 0)
}
return false
}
您可以shouldUpdateScroll在 GitHub 上或GatsbyJS 网站上的文档中shouldUpdateScroll找到 的代码。
如果你有overflow: hidden或overflow: auto设置了body，你就会遇到这个问题！
如果您的页面是无状态功能组件，则可以使用useEffect钩子滚动回页面顶部，假设您正在使用graphql，因此您的组件将一些数据作为参数。这样每次data更改时，您都会滚动到页面顶部（与 componentDidUpdate 类似）。
const PageCmp = ({ data }) => {
...
useEffect(() => {
window.scrollTo(0,0)
}, [data])
...
}
通过将 index.js 页面转换为基于类的组件来找出解决方法，然后添加
componentDidUpdate() {
window.scrollTo(0,0);
}
不是最干净的修复，我也不知道为什么它没有自动滚动，下周去参加一个 JS 会议，所以我会问这个问题，如果我得到答案，就会发布跟进。
我有一种感觉，这与我的风格有关，因为我开始了一个新项目并且 Gatsby-cli 没有问题。将重构样式以查看是否可以解决问题。
注意：在迈克尔的回答之后回到这个，它也与overflow: hidden;我在身体上的风格有关，删除它也解决了我的问题。