Backtop #
The backtop button is used to return to the top of a component.
Examples #
Basic usage #
By default va-backtop watches for a body element offset height. You can change a target element, positioning and scrolling speed.
Accessibility #
The aria-label is set by ariaLabel prop, default to back to top. The component is the last element that recieves focus on the page.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| ariaLabel | The aria-label of the component |
|
|
| color | Color of the component (theme string or |
|
|
| horizontalOffset | Sets the horizontal offset of the component from the border of the monitor |
|
|
| horizontalPosition | Sets the horizontal position of the component |
|
|
| preset | Named preset combination of component props. |
| - |
| speed | Sets the scrolling speed |
|
|
| target | Applies the selector to which the backtop is bound |
| - |
| verticalOffset | Sets the vertical offset of the component from the border of the monitor |
|
|
| verticalPosition | Sets the vertical position of the component |
|
|
| visibilityHeight | The minimum height after which the backtop is displayed |
|
|
Events #
| Name | Description |
|---|---|
click | Emitted when user clicked on backtop. The event argument is: |
Slots #
| Name | Description |
|---|---|
default | Slot for backtop content |
Css Variables #
| Name | Default Value |
|---|---|
| --va-backtop-position | fixed |
| --va-backtop-top | auto |
| --va-backtop-left | auto |
| --va-backtop-right | auto |
| --va-backtop-bottom | auto |
| --va-backtop-cursor | pointer |
| --va-backtop-z-index | 3 |