Skip to main content

Function: ScrollToTop()

@arolariu/website

@arolariu/website / hooks/useScrollToTop / ScrollToTop

Function: ScrollToTop()

ScrollToTop(): Element

Defined in: hooks/useScrollToTop.tsx:87

Displays an animated floating action button that scrolls to top of page.

Returns​

Element

Animated floating action button (FAB) or null when hidden

Remarks​

Rendering Context: Client Component (requires "use client" directive).

Visibility Behavior:

  • Button hidden by default
  • Appears when user scrolls more than 500px down the page
  • Disappears when user scrolls back above 500px threshold

Animation:

  • Uses Framer Motion (motion/react) for smooth transitions
  • Fade in/out with scale animation (opacity + scale)
  • Hover effect: Scales up to 1.1x
  • Tap effect: Scales down to 0.9x
  • Entry/exit duration: 300ms

Scroll Behavior:

  • Smooth scroll animation (behavior: "smooth")
  • Scrolls to absolute top (top: 0)
  • Uses native window.scrollTo API

Positioning:

  • Fixed position in bottom-right corner
  • 32px from right edge (right-8)
  • 32px from bottom edge (bottom-8)
  • Z-index 50 (above most content)

Accessibility:

  • Interactive button element (keyboard accessible)
  • Icon-only button (consider adding aria-label in production)

Performance:

  • Uses useCallback for stable scroll handler
  • Debounced via native scroll event throttling
  • Cleanup removes event listener on unmount

Examples​

// Add to layout for site-wide scroll-to-top
export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html>
      <body>
        {children}
        <ScrollToTop />
      </body>
    </html>
  );
}
// Add to specific page with long content
export default function BlogPost() {
  return (
    <article>
      <LongContent />
      <ScrollToTop />
    </article>
  );
}

See​

Framer Motion Documentation

// was this page useful?