Basic Usage

Default Scroll-To-Top

The button is mounted once at the app root and watches the page scroll. Below is a self-contained scroll demo — scroll inside the panel and the embedded button appears in the bottom-right corner.

Scroll me

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

In production, drop a single <ScrollToTop /> at your app root. It tracks window by default and floats over the viewport.

import { ScrollToTop } from 'fluxo-ui';

// Mounted at the app root; auto-shows after 200px of scroll
<ScrollToTop showAfter={200} />

Variants × Layouts

The component is shown here in 'inline' mode so the visual treatments are easy to compare. In production, mode='fixed' (default) anchors it to a viewport corner.

layout="solid"

layout="outlined"

layout="glass"

Custom color & gradient

<ScrollToTop variant="primary" />
<ScrollToTop variant="success" layout="outlined" />
<ScrollToTop layout="glass" />
<ScrollToTop gradient={{ from: '#3b82f6', to: '#a855f7' }} />

Sizes & Label

Sizes & Optional Label

Four sizes plus an optional text label that turns the FAB into a pill.

sm

md

lg

xl

label

<ScrollToTop size="sm" />
<ScrollToTop size="md" />
<ScrollToTop size="lg" />
<ScrollToTop size="xl" />
<ScrollToTop size="md" label="Top" />
<ScrollToTop size="md" showProgress />

Progress Ring

With Progress Ring

Set showProgress to draw a circular ring tracking how far down the user has scrolled. Pair with a gradient for a striking effect.

Scroll me

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<ScrollToTop showProgress size="lg" gradient={{ from: '#3b82f6', to: '#a855f7' }} />

Import

import { ScrollToTop } from 'fluxo-ui';
import type { ScrollToTopProps, ScrollToTopVariant, ScrollToTopLayout, ScrollToTopSize } from 'fluxo-ui';

Props

PropertyTypeDefaultDescription

target

HTMLElement | string

—

Scroll target element or selector (default: window)

target

HTMLElement | string

Scroll target element or selector (default: window)

showAfter

number

"200"

Pixels of scroll required before the button appears

showAfter

number"200"

Pixels of scroll required before the button appears

position

'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'

"'bottom-right'"

Corner the button anchors to (in 'fixed' mode)

position

'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'"'bottom-right'"

Corner the button anchors to (in 'fixed' mode)

offset

{ x?: number; y?: number }

"{ x: 24, y: 24 }"

Distance from the chosen corner in px

offset

{ x?: number; y?: number }"{ x: 24, y: 24 }"

Distance from the chosen corner in px

size

'sm' | 'md' | 'lg' | 'xl'

"'md'"

Preset size

size

'sm' | 'md' | 'lg' | 'xl'"'md'"

Preset size

variant

"'primary'"

Color variant

variant

Color variant

layout

'solid' | 'outlined' | 'glass'

"'solid'"

Visual treatment

layout

'solid' | 'outlined' | 'glass'"'solid'"

Visual treatment

color

string

—

Override variant color with any CSS color

color

string

Override variant color with any CSS color

gradient

{ from: string; to: string; angle?: number }

—

Gradient background overrides variant/color

gradient

{ from: string; to: string; angle?: number }

Gradient background overrides variant/color

icon

IconComponent | ReactElement

—

Icon shown inside the button (default: chevron-up)

icon

IconComponent | ReactElement

Icon shown inside the button (default: chevron-up)

label

string

—

Optional visible text next to the icon

label

string

Optional visible text next to the icon

showProgress

boolean

"false"

Render a circular progress ring around the icon

showProgress

boolean"false"

Render a circular progress ring around the icon

progressColor

string

—

Color of the progress ring

progressColor

string

Color of the progress ring

mode

'fixed' | 'inline'

"'fixed'"

'fixed' floats over the viewport; 'inline' renders inside its parent

mode

'fixed' | 'inline'"'fixed'"

'fixed' floats over the viewport; 'inline' renders inside its parent

behavior

'smooth' | 'auto'

"'smooth'"

Scroll behavior; auto-falls back under prefers-reduced-motion

behavior

'smooth' | 'auto'"'smooth'"

Scroll behavior; auto-falls back under prefers-reduced-motion

onClick

() => void

—

Fires after the scroll begins

onClick

() => void

Fires after the scroll begins

id

string

—

HTML id attribute

id

string

HTML id attribute

className

string

—

Additional CSS classes

className

string

Additional CSS classes

ariaLabel

string

"'Scroll to top'"

Accessible label

ariaLabel

string"'Scroll to top'"

Accessible label

Features

Auto-Show / Hide

Appears once the user scrolls past the threshold; smoothly slides back when they reach the top.

Fully Themed

7 variants × 3 layouts plus any custom CSS color or gradient. Full dark-mode support out of the box.

Progress Ring

Optional circular ring tracking how far down the page the user has scrolled.

Window or Container

Tracks the window by default, or any element via the target prop — perfect for scrollable side panels.

Reduced Motion

Falls back to instant scroll under prefers-reduced-motion and skips the appearance animation.

Touch Targets

Always ≥ 44×44px on mobile, with focus-visible outline and aria-label.

Scroll To Top

Basic Usage

Default Scroll-To-Top

Scroll me

Variants × Layouts

Variants × Layouts

Sizes & Label

Sizes & Optional Label

Progress Ring

With Progress Ring

Scroll me

Import

Props

Features

Auto-Show / Hide

Fully Themed

Progress Ring

Window or Container

Reduced Motion

Touch Targets