Link 转到最后滚动位置而不是锚点

Question

在我的 React 应用程序上，我有两个页面：页面 A（主页）和页面 B。
在页面 B 上，我有 link 转到页面 A 的特定部分。

在页面 A 上： <section id="foo">Foo</section>
B页： <a href="/#foo">Go to foo</a>

每次我从 A 页面转到 B 页面并单击 link 时，屏幕都会转到上一个滚动位置而不是该部分。

我试图通过以下方式停用浏览器滚动历史记录功能：

useEffect(() => {
  if (history.scrollRestoration) {
    history.scrollRestoration = 'manual';
  }
}, []);

我也尝试添加功能以转到所需的部分：

useEffect(() => {
  if (window.location.hash) {
      const anchor = document.querySelector(window.location.hash);
      anchor.scrollIntoView();
  }
}, []);

但是 none 这些解决方案有效。我在 Chrome 和 Firefox 上重现了相同的行为。

Answer 1

这是 Gatsby 的一个特性：它覆盖了浏览器默认的滚动历史记录行为。那里有更多信息 https://www.gatsbyjs.com/docs/how-to/routing/scroll-restoration/

我通过添加修复了它：

// gatsby-browser.js
exports.shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition,
}) => {
  return location.href.indexOf("#") > -1 ? false : true;
};

Link 转到最后滚动位置而不是锚点

Link going to last scroll position instead of anchor

html

javascript

reactjs

gatsby