在 React 中滚动到顶部

我们将介绍如何在 React 中创建具有滚动到页面顶部功能的按钮。

在 React 中使用 react-scroll-to-top 库创建滚动到顶部按钮

当我们在一个页面上有很多内容时，用户很难滚动到顶部来查看导航或导航到另一个页面。但作为开发人员，我们总是想方设法让用户只需单击一下按钮即可轻松滚动到顶部。

如果我们尝试构建一个滚动到顶部按钮的所有功能，我们可能需要编写一点代码。但是当我们在开发一个 React 应用程序时，我们可以通过安装一个让我们的生活更轻松的库来实现这个功能。

让我们通过一个示例，只需一个按钮即可滚动到顶部。

一个名为 react-scroll-to-top 的库用于获取滚动到顶部的功能。因此，让我们使用以下命令在 React 中创建一个新应用程序。

# react
npx create-react-app my-app

在 React 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。

# react
cd my-app

现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。

# react
npm start

现在，让我们使用 npm 安装库 react-scroll-to-top。

# react
npm i react-scroll-to-top

安装库后，我们现在可以在我们的 App.js 中导入 ScrollToTop。

# react
import ScrollToTop from "react-scroll-to-top";

现在，在我们的默认函数中，我们将返回一个模板，该模板将覆盖页面的 200vh 左右，以实现滚动到顶部。我们还将返回带有一些设置的 ScrollToTop 组件，例如 smooth 用于平滑滚动，color 用于设置图标的颜色。

所以我们在 App.js 中的代码将如下所示。

# react
import React from "react";
import "./styles.css";
import ScrollToTop from "react-scroll-to-top";

export default function App() {
  return (
    <div className="App">
      <ScrollToTop smooth color="#000" />
      <h1>Scroll To See Magic</h1>
      <p style={{ marginTop: "200vh" }}>You Have Reached Bottom</p>
    </div>
  );
}

现在，让我们检查一下我们的应用程序是如何工作的。

输出：

正如你在上图中所看到的，我们通过在应用程序中添加一行代码成功地创建了滚动到顶部的动画。

通过这种方式，我们可以在任何页面上使用滚动到顶部功能，而不需要编写多于一行的代码。