BackTop
BackTop makes it easy to go back to the top of the page.
Install
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
easingandduration.
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. | 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 |