Back Top

Navigation

Utility

A floating button that scrolls the page back to the top with smooth animation.

Preview

The BackTop button appears in the bottom-right corner when you scroll down

A BackTopWithProgress button is active on this page. Scroll down to see the progress indicator fill up as you scroll.

Positions

Position the button in different corners

bottom-left

bottom-center

bottom-right (default)

Sizes

Different size variants

Small

Medium

Large

Custom Content

Use custom icons or text inside the button

Custom Icon

TOP

Custom Text

Props

Component API reference

Prop	Type	Default	Description
`visibilityHeight`	`number`	`400`	Scroll threshold to show button
`position`	`'bottom-right' \| 'bottom-left' \| 'bottom-center'`	`'bottom-right'`	Button position
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button size
`duration`	`number`	`450`	Scroll animation duration (ms)
`target`	`() => HTMLElement \| Window`	`window`	Custom scroll target
`onClick`	`() => void`	—	Click callback
`children`	`ReactNode`	`ArrowUp icon`	Custom button content
`showProgress`	`boolean`	`false`	Show circular progress
`progressColor`	`string`	`'#6366f1'`	Progress indicator color

Usage

Import and implementation examples

import { BackTop, BackTopWithProgress } from '@/components/ui/back-top'
import { Rocket } from 'lucide-react'

// Basic usage
<BackTop />

// With position and size
<BackTop position="bottom-left" size="lg" />

// With progress indicator
<BackTopWithProgress
  showProgress
  progressColor="var(--color-indigo-500)"
/>

// Custom icon
<BackTop>
  <Rocket className="w-5 h-5 text-indigo-600" />
</BackTop>

// Custom text
<BackTop className="bg-indigo-600 border-indigo-600">
  <span className="text-xs font-medium text-white">TOP</span>
</BackTop>

// With visibility threshold
<BackTop visibilityHeight={200} />

Features

Built-in functionality

Smooth scrolling: Animated scroll with ease-out easing
Visibility threshold: Customize when button appears
Three positions: Bottom-right, bottom-left, bottom-center
Three sizes: Small, medium, and large variants
Progress indicator: Optional circular scroll progress
Custom target: Scroll any scrollable element
Custom content: Use any icon or text
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses button element with aria-labelaria-label="Scroll to top"Focusable with keyboard

Keyboard Navigation

Key	Action
`Tab`	Focus the button
`Enter`	Scroll to top
`Space`	Scroll to top