在页面之间导航时如何保留顶部的滚动位置？ [重复]

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

将以下行添加到应用程序中的某个相关位置（例如索引文件或路由器配置文件等）

window.history.scrollRestoration = 'manual'

如果您停留在应用程序中（不重新加载或刷新页面，因此导航在内部和内部进行

react-router-dom

），这里有一个有用的链接 - react-router 在每次转换时滚动到顶部

Answer 2

尝试像这样破坏路径名

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

  return null;
};

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

scroll-behavior: auto