39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
import { useEffect } from 'react'
|
|
import { useLocation } from 'react-router-dom'
|
|
|
|
export default function ScrollToTop() {
|
|
const { pathname, hash } = useLocation()
|
|
|
|
// Cross-page navigation: scroll to hash or top on route change
|
|
useEffect(() => {
|
|
if (hash) {
|
|
const el = document.querySelector(hash)
|
|
if (el) {
|
|
el.scrollIntoView({ behavior: 'smooth' })
|
|
return
|
|
}
|
|
}
|
|
window.scrollTo(0, 0)
|
|
}, [pathname, hash])
|
|
|
|
// Same-page: React Router won't re-navigate if URL is already identical,
|
|
// so intercept clicks on any link pointing to #contact-form directly.
|
|
useEffect(() => {
|
|
const handleClick = (e) => {
|
|
const anchor = e.target.closest('a')
|
|
if (!anchor) return
|
|
const href = anchor.getAttribute('href') || ''
|
|
if (!href.includes('#contact-form')) return
|
|
const el = document.querySelector('#contact-form')
|
|
if (!el) return
|
|
e.preventDefault()
|
|
el.scrollIntoView({ behavior: 'smooth' })
|
|
window.history.pushState(null, '', '#contact-form')
|
|
}
|
|
document.addEventListener('click', handleClick)
|
|
return () => document.removeEventListener('click', handleClick)
|
|
}, [])
|
|
|
|
return null
|
|
}
|