如何在不使用 React 保持滚动位置的情况下转到另一个页面答案

【问题标题】：How to go to another page without keeping scroll position with React如何在不使用 React 保持滚动位置的情况下转到另一个页面
【发布时间】：2021-10-08 23:03:09
【问题描述】：

我正在使用 Next/React 开发一个项目。当我点击一个应该将我带到另一个页面的按钮时，滚动位置保持不变，这意味着我在新页面上向下到达 X 像素。

我在页面中添加了以下代码：

if (window.pageYOffset > 0) {
  window.scrollTo(0, 0);
}

它有效。但问题是，在它工作之前，页面在到达顶部之前会向下显示 X 像素大约 1 秒或更短时间。

【问题讨论】：

标签： reactjs scroll routes next.js single-page-application

【解决方案1】：

将滚动添加到页面组件的useEffect 钩子或componentDidMount 中的顶部代码。您需要将此添加到每个页面组件。我建议将其移动到自定义钩子中并调用它。

为您的useEffect 执行此操作：

useEffect(() => window.scrollTo(0, 0), []);

这将确保一旦组件被挂载，它将滚动到顶部。空的[] 依赖数组确保它只在组件挂载时执行一次。

【讨论】：

谢谢！不幸的是，这就是我所做的，它首先进入上一页位置，然后进入顶部。

【解决方案2】：

您可以尝试两种方法：

第一

ReactDOM.findDOMNode(this).scrollLeft = 0; 如果是类组件，则可以在 componentDidUpdate 中添加此代码，如果是函数组件，则可以在 useEffect 中添加此代码

第二

history.listen((location, action) => {
    window.scrollTo(0, 0)
})

【讨论】：