# 返回顶部 BackTop

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/back-top
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

可一键返回顶部的按钮。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：当滚动到一定高度的时候，在右下角会出现一个返回顶部的按钮。
- **自定义按钮**：可以自定义返回顶部的按钮。
- **滚动类型和滚动时间**：当然，我们提供了更丰富的功能可供使用，你可以通过指定 `easing` 和 `duration` 来指定滚动到顶部的过度效果和滚动时间。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### BackTop

|参数名|描述|类型|默认值|
|---|---|---|---|
|duration|滚动到顶部的时间。|number |`400`|
|visibleHeight|当滚动到这个高度时，显示返回顶部按钮。|number |`400`|
|easing|滚动到顶部的缓动方式类型, 所有类型：[easing](https://github.com/PengJiyuan/b-tween)。|string |`quartOut`|
|className|节点类名|string \| string[] |`-`|
|style|节点样式|CSSProperties |`-`|
|onClick|点击返回顶部时的回调函数。|() => void |`-`|
|target|设置需要监听其滚动事件的元素，值为一个返回对应 `DOM` 元素的函数。|() => HTMLElement \| Window |`() => window`|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt