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.

Vertical Position:

Horizontal Position:

Vertical offset:
5%

Horizontal offset:
5%

Visibility height:
1

Scroll speed:
50

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
aria-label

The aria-label of the component

String

"$t:backToTop"

color

Color of the component (theme string or HEX string).

String

""

horizontal-offset

Sets the horizontal offset of the component from the border of the monitor

String

"1rem"

horizontal-position

Sets the horizontal position of the component

String

"right"

preset

Named preset combination of component props.

String

-

speed

Sets the scrolling speed

Number

50

target

Applies the selector to which the backtop is bound

Object | String

-

vertical-offset

Sets the vertical offset of the component from the border of the monitor

String

"1rem"

vertical-position

Sets the vertical position of the component

String

"bottom"

visibility-height

The minimum height after which the backtop is displayed

Number

300

Events #

NameDescription

click

Emitted when user clicked on backtop. The event argument is:

Event

Slots #

NameDescription

default

Slot for backtop content

Css Variables #

NameDefault 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