Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.

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

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 #

NameDescriptionTypesDefault
ariaLabel

The aria-label of the component

String

"$t:backToTop"

color

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

String

""

horizontalOffset

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

String

"1rem"

horizontalPosition

Sets the horizontal position of the component

String

"right"

preset

Named preset combination of component props.

String | Array

-

speed

Sets the scrolling speed

Number | String

50

target

Applies the selector to which the backtop is bound

Object | String

-

verticalOffset

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

String

"1rem"

verticalPosition

Sets the vertical position of the component

String

"bottom"

visibilityHeight

The minimum height after which the backtop is displayed

Number | String

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