在现代网页设计中，回到页面顶部的按钮成为了一个必备组件。在这方面，React 社区也有很多优秀的解决方案，其中常用的是一个叫做 react-back-top 的 npm 包。本文将介绍如何安装和使用该 npm 包。
安装
安装 react-back-top 非常简单，只需在命令行中运行以下代码：
npm install react-back-top --save
使用
在你的 React 项目中，导入 react-back-top 组件：
import BackTop from 'react-back-top';
然后，在页面的任何位置放置该组件即可：
<BackTop />
如果你喜欢定制化，react-back-top 还支持多个可选属性，如 background、color、right 等。例如，你可以这样自定义 background 和 color 属性：
<BackTop background="#42a5f5" color="white" />
right 属性则是指定按钮距离页面右侧的距离，单位为像素：
<BackTop right={100} />此外，你还可以在回到页面顶部之前执行一些操作，例如滚动到指定的位置：
<BackTop onClick={() => window.scrollTo(0, 0)} />示例代码
下面是一个完整的示例代码，你可以在自己的 React 项目中使用它或根据需要进行修改：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -----------------
-------- ----- -
------ -
-----
-----------------
---------------
---------------
---------------
---------------
---------------
---------------
---------------
---------------
---------------
-------- --
------
--
-
------ ------- ----总结
本文介绍了如何安装和使用 react-back-top npm 包，以及如何定制化和执行相关动作。react-back-top 可以大大方便网页设计和用户交互，欢迎在自己的项目中使用和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ec081e8991b448dc7eb