nuxt-x-marketing
ButtonBackToTop
Floating scroll-to-top button that appears after a configurable scroll threshold, with 3 positions, 3 visual variants, and customizable icon/label.
ButtonBackToTop
The XMarkButtonBackToTop component renders a fixed-position floating button that fades in once the page has scrolled past a threshold, and smoothly scrolls the user back to the top when clicked. It's typically added once near the root of app.vue and doesn't require per-page wiring. The button is purely presentational — it doesn't require any state or context to function.
Components
<XMarkButtonBackToTop />
Minimal — primary, bottom-right, with defaults:
<XMarkButtonBackToTop />
Glass variant over a hero:
<XMarkButtonBackToTop threshold="300" position="bottom-right" variant="glass" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
threshold | number | 400 | Scroll distance in pixels at which the button becomes visible. |
position | string | 'bottom-right' | Screen position: 'bottom-right', 'bottom-left', 'bottom-center'. |
variant | string | 'primary' | Visual style: 'primary', 'neutral', 'glass'. 'glass' uses the xGlass utility. |
icon | string | 'i-lucide-arrow-up' | Iconify icon name. |
label | string | 'Back to top' | Aria label (and tooltip text on hover). |
smooth | boolean | true | When true, scroll uses 'smooth' behavior. When false, instant 'auto' jump. |
AI Context
category: Utilities
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkButtonBackToTop
use-when: >
Adding a scroll-to-top affordance to a long marketing / docs / blog page.
Drop it once near the root of app.vue — it auto-handles its own scroll
listener and cleans up on unmount. Zero state, zero coupling.
typical-page-section: Mounted once at the page root (typically app.vue or default layout).