Return to the action buttons at the top of the page.
Examples
Scroll down to see the bottom-right gray button.
Basic usage
Basic usage
Scroll down to see the bottom-right blue button.
Custom content
Custom content
BackTop keeps showing
Controlled state
In the controlled state, the display state of BackTop is completely controlled by the user.
Properties
| Property | Description | Type | Default | Require |
|---|---|---|---|---|
| target | Set the element whose scroll event needs to be listened to. The value is a function that returns the corresponding DOM element | Window | HTMLElement | (() => Window | HTMLElement) | () => window | false |
| container | Specifies the container for BackTop rendering | Element | (() => Element); | () => document.body | false |
| bottom | distance from bottom | number | 40 | false |
| right | distance to the right | number | 40 | false |
| show | Specify whether to display, controlled mode | boolean | - | false |
| onChange | BackTop state change callback | (show:boolean) => void | - | false |
| visibilityHeight | The height that triggers the display to return to the top when scrolling | number | 300 | false |
| children | custom element | React.ReactNode | - | false |