Back To Top Button

Floating action button that fades in once the user scrolls past a threshold and smooth-scrolls to the top. Respects prefers-reduced-motion. Mounted once in the root layout so it appears site-wide.

Live Preview

Static sample of the button — in production it's mounted once in the root layout and fixed to the bottom-right corner. Click to smooth-scroll this page to the top.

The real instance is already mounted site-wide — scroll this page past 400px and watch the bottom-right corner to see the fade-in animation on the fixed version.

Props

Prop	Type	Default	Description
`threshold`	`number`	`400`	Scroll Y (in pixels) past which the button fades in.
`className`	`string`	-	Extra classes applied to the floating button.

Behavior

Visibility

Listens to `window.scroll` with a passive listener. Shows after scrollY > threshold; hides otherwise.

Animation

Framer Motion spring (stiffness 50, damping 20). Scales and fades in/out. Respects `prefers-reduced-motion` — scroll-to-top uses`behavior: 'auto'` instead of smooth when reduced motion is set.

Usage

tsx

// Root layout — mount once site-wide
import { BackToTopButton } from '@/components/ui/BackToTopButton'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <BackToTopButton />
      </body>
    </html>
  )
}

Import

tsx

import { BackToTopButton } from '@/components/ui/BackToTopButton'