react

• Soulock
• 2026年07月02日
• • 技术

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