# BackTop

- Page: https://jiguang132.com/resources/arco-design/docs/back-top
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

`BackTop` makes it easy to go back to the top of the page.

## Install

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

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: When scrolling to a certain height, a button to return to the top will appear in the lower right corner.
- **Custom button**: You can customize the button to return to the top.
- **Easing**: Of course, we provide richer functions for use. You can specify the transition effect and scroll time of scrolling to the top by specifying `easing` and `duration`.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### BackTop

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|duration|Duration to scroll to the top|number |`400`|
|visibleHeight|When scrolling to this height, display the back to top button.|number |`400`|
|easing|Scroll to the top of the easing method type, all types: [easing](https://github.com/PengJiyuan/b-tween).|string |`quartOut`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|
|onClick|Callback when you click to return to the top.|() => void |`-`|
|target|Set the element whose scroll event needs to be listened to. The value is a function that returns the corresponding `DOM` element|() => HTMLElement \| Window |`() => window`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt