如何修复盖茨比JS Link组件保留滚动位置和不重置到顶部

Question

我正在使用盖茨比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页”或网站底部的任何页面时，我希望页面加载时用户返回顶部。

实际行为：

用户停留在当前页面的滚动位置

Answer 1

如果您的页面是无状态功能组件，则可以使用useffect钩子滚动回页面顶部，假设您使用的是graphql，因此您的组件将一些数据作为参数。这样，每次数据更改时，您都会滚动到页面顶部（工作方式类似于componentDidUpdate）。

const PageCmp = ({ data }) => {
    ...
    useEffect(() => {
        window.scrollTo(0,0)
    }, [data])
    ...
}

Answer 2

如果您在主体上设置了溢出：隐藏溢出或溢出：自动溢出，则会出现此问题！

Answer 3

您还可以修改盖茨比浏览器。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
}

您可以在GitHub或GatsbyJS网站上的shouldUpdateScroll文档中找到shouldUpdateScroll的代码。