Bug: No scroll-to-top on route navigation #89

New Issue

Closed

opened 2026-05-17 21:15:17 -05:00 by null · 0 comments

null commented

2026-05-17 21:15:17 -05:00

Owner

Problem

When navigating between pages (e.g. from Services to Contact), the scroll position persists from the previous page. Users land mid-page instead of at the top.

This is a known SPA issue - React Router does not auto-scroll on route change.

Fix

Add a ScrollToTop component that calls window.scrollTo(0, 0) on every route change:

import { useEffect } from react;
import { useLocation } from react-router-dom;
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => { window.scrollTo(0, 0); }, [pathname]);
return null;
}

Then add ScrollToTop inside the App component.

Files

src/components/ScrollToTop.jsx - new
src/App.jsx - import and render

Severity

Medium - affects all page transitions

## Problem When navigating between pages (e.g. from Services to Contact), the scroll position persists from the previous page. Users land mid-page instead of at the top. This is a known SPA issue - React Router does not auto-scroll on route change. ## Fix Add a ScrollToTop component that calls window.scrollTo(0, 0) on every route change: import { useEffect } from react; import { useLocation } from react-router-dom; export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } Then add ScrollToTop inside the App component. ## Files - src/components/ScrollToTop.jsx - new - src/App.jsx - import and render ## Severity Medium - affects all page transitions