BackTop
A back-to-top button fixed to a corner of the viewport; clicking it smooth-scrolls back to the top of the page.
Basic usage
The button is fixed to the bottom-right corner of the viewport by default (bottom: 32px; right: 32px); scroll the page then click to go back to the top.
Basic usage
Custom position
Custom position
Show / hide control
Show / hide control
Click event
Click event
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
bottom | Distance from the viewport bottom | string | 32px |
right | Distance from the viewport right edge | string | 32px |
visible | Whether the button is shown | boolean | — |
Events
| Event | Description |
|---|---|
oas-click | The button was clicked (then smooth-scrolls to the top) |
The button is position: fixed on the viewport; the :host defaults to display: inline-block; the button has aria-hidden="true" when hidden.