Back Top

Ready

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

Live Demo

The BackTop button appears in the bottom-right corner when you scroll down this page. Scroll down to see it in action!

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

Basic Usage

Simple back-to-top button with default styling

import { BackTop } from '@/components/ui/back-top'

// Add to your layout or page
function MyPage() {
  return (
    <div>
      {/* Your content */}
      <BackTop />
    </div>
  )
}

Positions

Position the button in different corners

bottom-left

bottom-center

bottom-right (default)

Sizes

Different size variants

Small

Medium

Large

With Progress Indicator

Shows scroll progress around the button

The BackTopWithProgress component displays a circular progress indicator that fills as you scroll down the page.

import { BackTopWithProgress } from '@/components/ui/back-top'

<BackTopWithProgress
  showProgress
  progressColor="#6366f1"
/>

Custom Content

Use custom icons or text inside the button

Custom Icon

TOP

Custom Text

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

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

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
Accessible - Proper ARIA label for screen readers

API Reference

BackTop component props

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

Scroll down more to see the BackTop button