Vitral 0.2
Misc

ScrollTop

A button back to the top of a long page or a scrolling element, shown past a threshold.

WAI-ARIA tested

Import

main.ts
import { ScrollTop } from '@vitral/vue';

In an element

Line 1: scroll down and the button appears at the bottom of this box.

Line 2: scroll down and the button appears at the bottom of this box.

Line 3: scroll down and the button appears at the bottom of this box.

Line 4: scroll down and the button appears at the bottom of this box.

Line 5: scroll down and the button appears at the bottom of this box.

Line 6: scroll down and the button appears at the bottom of this box.

Line 7: scroll down and the button appears at the bottom of this box.

Line 8: scroll down and the button appears at the bottom of this box.

Line 9: scroll down and the button appears at the bottom of this box.

Line 10: scroll down and the button appears at the bottom of this box.

Line 11: scroll down and the button appears at the bottom of this box.

Line 12: scroll down and the button appears at the bottom of this box.

Line 13: scroll down and the button appears at the bottom of this box.

Line 14: scroll down and the button appears at the bottom of this box.

Line 15: scroll down and the button appears at the bottom of this box.

Line 16: scroll down and the button appears at the bottom of this box.

Line 17: scroll down and the button appears at the bottom of this box.

Line 18: scroll down and the button appears at the bottom of this box.

Line 19: scroll down and the button appears at the bottom of this box.

Line 20: scroll down and the button appears at the bottom of this box.

<script setup lang="ts">import { ScrollTop } from '@vitral/vue';</script> <template>    <div tabindex="0" aria-label="Long text" style="position: relative; height: 14rem; width: 100%; overflow: auto; border: 1px solid var(--vt-content-border-color); border-radius: 8px; padding: 1rem">        <p v-for="n in 20" :key="n">Line {{ n }}: scroll down and the button appears at the bottom of this box.</p>        <ScrollTop target="parent" :threshold="100" />    </div></template>

API

Read from packages/vue/src/components/ScrollTop/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
target'window' | 'parent'What it scrolls: the page (the default) or the element it is placed in.
thresholdnumberHow far down, in pixels, before it appears. Defaults to 400.
iconIconPropDefaults to an up arrow.
behavior'smooth' | 'auto'`'smooth'` (the default) or `'auto'`. Reduced motion always jumps.
severitySeverity—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
clickevent: MouseEvent—