ScrollToTop

Client component that scrolls the page to the top on route changes.

Props

None - renders nothing (null), operates via side effect only.

Usage

import { ScrollToTop } from '@/components/system/ScrollToTop';

// Typically placed in the root layout
<ScrollToTop />

Features

• Route change detection: Uses usePathname to detect navigation
• Smooth scrolling: Scrolls to top using behavior: 'smooth'
• Cross-browser compatibility: Falls back to directly setting scrollTop on both document.documentElement and document.body
• Post-render timing: Uses requestAnimationFrame to ensure scroll happens after render

Notes

• Client component ('use client')
• Renders null - no visual output
• Fixes Next.js scroll restoration issues where pages don't scroll all the way to the top after client-side navigation