React 回到顶部按钮：自实现 vs Ant Design FloatButton vs react-scroll-to-top

自己实现（推荐，无依赖）

约 30 行代码，支持平滑滚动，可自由定制样式：

import { useEffect, useState } from "react";

export default function BackTop() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      setShow(window.scrollY > 300);
    };

    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  if (!show) return null;

  return (
    <button
      onClick={() =>
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        })
      }
      style={{
        position: "fixed",
        right: 20,
        bottom: 20,
        width: 50,
        height: 50,
        borderRadius: "50%",
        cursor: "pointer",
      }}
    >
      ↑
    </button>
  );
}

用法：

function App() {
  return (
    <>
      <YourPage />
      <BackTop />
    </>
  );
}

滚动超过 300px 才显示，点击后平滑回到顶部。useEffect 里记得清理监听器，避免内存泄漏。

Ant Design：FloatButton.BackTop

已经用了 Ant Design 的项目，直接用现成组件：

import { FloatButton } from "antd";

function App() {
  return (
    <>
      <YourPage />
      <FloatButton.BackTop />
    </>
  );
}

支持自动显示/隐藏、动画、自定义位置和图标，零配置可用。

Material UI

MUI 没有专门的 BackTop 组件，官方示例用 Fab 实现：

import Fab from "@mui/material/Fab";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";

<Fab
  color="primary"
  size="small"
  onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
>
  <KeyboardArrowUpIcon />
</Fab>

第三方库：react-scroll-to-top

如果项目没有 UI 库但想省事：

npm install react-scroll-to-top

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

function App() {
  return (
    <>
      <YourPage />
      <ScrollToTop smooth />
    </>
  );
}

支持平滑滚动、自定义颜色、自定义 SVG 图标、自定义触发高度。

选哪个

场景	推荐方案
普通 React 项目	自实现，30 行以内
已用 Ant Design	FloatButton.BackTop
已用 MUI	Fab + window.scrollTo
想快速加功能	react-scroll-to-top

不要为了一个回到顶部按钮引入专门的依赖，自实现版本代码量极小且完全可控。