如何修复Gatsby JS Link组件保持滚动位置而不重置到顶部

问题描述

我正在使用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
}

您可以在GatsbyJS网站上的shouldUpdateScroll on GitHub或documentation for shouldUpdateScroll中找到代码。

这篇关于如何修复Gatsby JS Link组件保持滚动位置而不重置到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！