Back To Top

Headless back-to-top button that appears past a scroll threshold and restores focus at the top.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { BackToTop } from "@vizejs/ui/back-to-top";

Or copy the source into your project with vize lib pull back-to-top (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Back-to-top button that appears once a scrollable article passes the threshold and returns focus to it. -->
<script setup lang="ts">
import { useId, useTemplateRef } from "vue";

import { BackToTop } from "@vizejs/ui/back-to-top";

const titleId = useId();
const article = useTemplateRef<HTMLElement>("article");
// The article scrolls on its own, so it needs a fixed block size.
const scrollerSize = { blockSize: "12rem", overflow: "auto" };
const sections = ["Installation", "Configuration", "Components", "Theming", "Testing", "Deploying"];
</script>

<template>
  <div>
    <section ref="article" :aria-labelledby="titleId" :style="scrollerSize">
      <h2 :id="titleId">Getting started</h2>
      <p v-for="section in sections" :key="section">
        {{ section }}: read this chapter before moving on to the next one.
      </p>
    </section>
    <BackToTop :target="article" :threshold="120" />
  </div>
</template>

API

BackToTop

Source: src/families/actions/back-to-top/back-to-top.vue

Props

Events

Slots

Exposed

Behavior

Normative behavior for @vizejs/ui/back-to-top (back-to-top.vue). Every row is proven by the named test.

BackToTop ships no stylesheet.