nuxt-x-affiliate
Back To Top
Floating back-to-top button — appears after a scroll threshold, smooth-scrolls to the top.
Back To Top
The XAFBackToTop component is a fixed-position button that fades in once the reader scrolls past a threshold, and smoothly scrolls back to the top of the page on click. Safe to mount globally — it has no DOM footprint when invisible.
Components
<XAFBackToTop />
<XAFBackToTop :threshold="600" side="right" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
threshold | number | 400 | Show after this many pixels scrolled. |
minScroll | number | 0 | Don't show until the user has scrolled this far in any direction. |
side | 'right' | 'left' | 'right' | Horizontal side of the viewport. |
bottom | number | 24 | Bottom offset (px). |
offset | number | 24 | Horizontal offset (px). |
behavior | 'smooth' | 'auto' | 'smooth' | Scroll behavior on click. |
variant | 'neutral' | 'primary' | 'glass' | 'neutral' | Visual treatment. |
icon | string | — | Iconify name. Without one, a text arrow renders — no icon collection needed. |
label | string | 'Back to top' | Accessible name. |
<XAFBackToTop variant="primary" icon="i-lucide-arrow-up" />
<XAFBackToTop variant="glass" side="left" />
glass needs something behind it to blur — over a plain white page it reads as a faint
outline, which is the intended effect.
AI Context
component: XAFBackToTop
package: "@xenterprises/nuxt-x-affiliate"
use-when: Floating back-to-top button that appears after a scroll threshold and smooth-scrolls to the top.