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 |