Smooth Scroll

Enable smooth scrolling for same-page anchor links only. Page navigations always start at the top instantly.

Important: Why JavaScript Instead of CSS

CSS scroll-behavior: smooth affects ALL scrolling, including Next.js page navigations. This causes unwanted smooth scrolling when changing pages.

Our approach: Use JavaScript to handle only #anchor link clicks with smooth scroll. Page navigations use browser default (instant to top).

Workflow

1. Create SmoothScroll Component - JavaScript handler for anchor links
2. Add to Layout - Include component in locale layout
3. Update globals.css - Keep only scroll-padding-top, remove scroll-behavior
4. Test - Verify anchor links smooth scroll, page changes are instant

Implementation