如何在 React js 中平滑滚动到顶部

在 React js 中，有许多方式可以实现平滑滚动到顶部的效果。在本文中，我们将向您介绍一些最简单和最常见的方法。

使用 React Router

如果您正在使用 React Router，您可以使用 scrollToTop 函数，该函数将使页面从顶部开始滚动。要使用它，请在路由器组件上注册一个 useEffect 钩子，从而每次路由更改时都会自动调用该函数。

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

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

  return null;
}

export default withRouter(ScrollToTop);

然后，将此组件包含在您的 BrowserRouter 组件中即可开始使用。

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <ScrollToTop />
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Router>
  );
}

使用 React Hook

另一种在 React js 中平滑滚动到页面顶部的方法是使用 React Hook。 React Hook 是在 React 16.8 中引入的新功能。它们允许你在不使用 class 组件的情况下使用状态管理和其他 React 功能。

import React, { useEffect } from 'react';

function ScrollToTopOnMount() {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return null;
}

export default ScrollToTopOnMount;

然后，在每个需要平滑滚动到顶部的页面中包含此组件。

function Home() {
  return (
    <div>
      <ScrollToTopOnMount />
      <h1>Home</h1>
      <p>Welcome to my website!</p>
    </div>
  );
}

使用第三方库

最后，您可以使用第三方库来实现平滑滚动到顶部的效果。这是最简单和最快速的方法，但您需要花费时间来了解和熟悉库的特定语法。其中，我们推荐使用 react-scroll 库。

首先，请安装该库。

npm install react-scroll --save

请确保在您的 index.js 或 App.js 文件中导入该库。

import { animateScroll as scroll } from "react-scroll";

然后，在需要平滑滚动到顶部的组件中，您可以使用以下代码：

function ScrollToTop() {
  return (
    <div>
      <button onClick={() => scroll.scrollToTop()}>
        Scroll to top
      </button>
    </div>
  );
}

export default ScrollToTop;

或者，您也可以更改滚动速度和样式等选项。

function ScrollToTop() {
  const scrollOptions = {
    duration: 500, // Scroll duration
    smooth: "easeInOutQuart", // Scroll timing function
    offset: -70 // Scroll offset
  };

  return (
    <div>
      <button onClick={() => scroll.scrollToTop(scrollOptions)}>
        Scroll to top
      </button>
    </div>
  );
}

export default ScrollToTop;

以上就是使用 react-scroll 库实现平滑滚动到顶部的简要介绍。

总结

在本文中，我们介绍了三种在 React js 中平滑滚动到顶部的方法。如果您正在使用 React Router，请使用第一种方法。如果您正在使用 React Hook，请使用第二种方法。如果您想要快速解决问题，请使用第三种方法。无论您选择哪种方法，请确保您的组件可以正常工作，并且可以在不同设备和浏览器上正常运行。