--- title: Scroll to Top description: Floating scroll-to-top button visibility: guest draft: false --- # Scroll to Top The `` component renders a fixed-position button that appears after the user scrolls past a configurable viewport depth. Clicking it smooth-scrolls back to the top of the page. ## Basic Usage :::preview{title="Scroll to Top Button"}

::: ```blade {{-- Place once in your layout, typically at the end of --}} ``` The button is invisible by default and fades in once the user scrolls past **1.5x the viewport height**. It positions itself in the **bottom-right** corner. ## Custom Threshold The `threshold` prop controls when the button appears, expressed as a multiplier of the viewport height: ```blade {{-- Appear early (after half a screen of scrolling) --}} {{-- Appear late (after 3 full screens) --}} {{-- Default: 1.5x viewport height --}} ``` | Value | Meaning | | --- | --- | | `0.5` | After scrolling half the viewport | | `1` | After scrolling one full viewport | | `1.5` | After scrolling 1.5 viewports (default) | | `3` | After scrolling 3 viewports | ## Size Variants ```blade {{-- Compact --}} {{-- Default --}} {{-- Large, touch-friendly --}} ``` ## Position The button defaults to the bottom-right corner. Use the `position` prop to move it: ```blade {{-- Default --}}

``` The offset from the edge uses the `--padding-wk-x-lg` design token, so it adapts to your theme. ## How It Works 1. An Alpine.js `scroll` event listener (with `{ passive: true }`) tracks the scroll position 2. `requestAnimationFrame` throttles updates to avoid layout thrashing 3. When `window.scrollY > window.innerHeight * threshold`, the button fades in via `x-transition` 4. Clicking calls `window.scrollTo({ top: 0, behavior: 'smooth' })` for native smooth scrolling 5. The `destroy()` lifecycle hook removes the scroll listener on component teardown (e.g. Livewire navigation) ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `threshold` | `float` | `1.5` | Viewport multiplier — button appears after scrolling `threshold * viewportHeight` pixels | | `size` | `string` | `'md'` | `'sm'`, `'md'`, `'lg'` | | `position` | `string` | `'bottom-right'` | `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` | | `scope` | `string\|null` | `null` | Scoped personalization key | ## Accessibility - `