fix scroll
This commit is contained in:
parent
e625a24b6e
commit
3a61000c12
|
|
@ -3,6 +3,8 @@ import { useLocation } from 'react-router-dom'
|
||||||
|
|
||||||
export default function ScrollToTop() {
|
export default function ScrollToTop() {
|
||||||
const { pathname, hash } = useLocation()
|
const { pathname, hash } = useLocation()
|
||||||
|
|
||||||
|
// Cross-page navigation: scroll to hash or top on route change
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (hash) {
|
if (hash) {
|
||||||
const el = document.querySelector(hash)
|
const el = document.querySelector(hash)
|
||||||
|
|
@ -13,5 +15,24 @@ export default function ScrollToTop() {
|
||||||
}
|
}
|
||||||
window.scrollTo(0, 0)
|
window.scrollTo(0, 0)
|
||||||
}, [pathname, hash])
|
}, [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
|
return null
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue