React Hooks 实现页面顶部回归按钮

2023-11-30 13:17:54

前言

在开发网页时，我们经常会遇到这样的情况：网页太长，用户需要花费大量时间滚动页面才能找到所需内容。为了解决这个问题，我们可以添加一个“返回顶部”按钮，以便用户可以快速回到页面顶部。

实现步骤

创建 React 项目

首先，我们需要创建一个 React 项目。可以使用以下命令：

npx create-react-app my-app

安装必要的库

接下来，我们需要安装必要的库。可以使用以下命令：

npm install react-router-dom

创建按钮组件

接下来，我们需要创建一个按钮组件。可以使用以下代码：

import React from "react";

const BackToTopButton = () => {
  return (
    <button
      onClick={() => {
        window.scrollTo({ top: 0, behavior: "smooth" });
      }}
    >
      回到顶部
    </button>
  );
};

export default BackToTopButton;

在 App.js 中使用按钮组件

接下来，我们需要在 App.js 中使用按钮组件。可以使用以下代码：

import React from "react";
import BackToTopButton from "./BackToTopButton";

const App = () => {
  return (
    <div>
      <h1>我的网页</h1>
      <BackToTopButton />
    </div>
  );
};

export default App;