在 React js 中使页面刷新在顶部 - Javascript

在 React Js 中，有时候我们需要在页面刷新的时候始终将页面滚动到顶部，而不是停留在之前滚动的位置。

在本篇文章中，我将介绍如何使用 Javascript 来实现这个功能。

方法一：使用 window.scrollTo()

这是最简单的方法之一，只需要在页面加载时调用 window.scrollTo() 方法即可。代码如下：

window.scrollTo(0, 0);

以上代码将会将页面滚动至（0,0）位置，也就是页面的最顶部。

方法二：使用 React Router

如果你正在使用 React Router，你可以在路由变化时调用 window.scrollTo(0, 0) 方法。代码如下：

import { withRouter } from 'react-router-dom';

class ScrollToTop extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return this.props.children;
  }
}

export default withRouter(ScrollToTop);

以上代码创建了一个名为 ScrollToTop 的组件，用于拦截每次路由变化并调用 window.scrollTo(0, 0) 方法。

为了让它运行正确，我们需要使用 withRouter 高阶组件将 ScrollToTop 组件包装起来。

最后，将 ScrollToTop 组件包含在你的 Router 组件中，如下所示：

<Router>
  <ScrollToTop>
    <App />
  </ScrollToTop>
</Router>

这将会每次路由变化时都调用 ScrollToTop 组件并将页面滚动至顶部。

结论

以上就是在 React Js 中使页面刷新在顶部的两种方法。你可以根据自己的需要选择其中一种方法来实现该功能。

希望本篇文章对你有所帮助。