ReactJS：在页面之间导航时滚动到顶部位置

Question

我在 ReactJS 应用程序中遇到一个问题，导航到新页面时，页面会自动向下滚动到页面顶部下方的位置，而不是从顶部开始（通常它采用上一页的滚动位置） ）。此行为与典型的页面导航不一致，在典型的页面导航中，新页面应从顶部加载。

我已经研究了可能的解决方案，但尚未找到适合我的解决方案。我在互联网上找到了很多，但发现下面的解决方案对我不起作用。有人可以建议如何确保在页面之间导航时，新页面始终从顶部加载而不是向下滚动吗？

任何帮助或见解将不胜感激。谢谢！

const ScrollToTop = () => {
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    };
  }, [history]);

  return null;
};

const ScrollToTop = () => {
  const pathname = useLocation();
  useEffect(() => {
      window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

上述解决方案都不适合我。

Answer 1

尝试像这样破坏路径名

const ScrollToTop = () => {
  const {pathname} = useLocation();
  useEffect(() => {
      window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

或 检查并删除 css 文件中的某个位置（如果有）

scroll-behavior: auto