united-tattoo/components/scroll-to-section.tsx
2025-09-16 21:36:20 -06:00

33 lines
957 B
TypeScript

"use client"
import { useEffect } from "react"
export function ScrollToSection() {
useEffect(() => {
const handleAnchorClick = (e: Event) => {
const target = e.target as HTMLAnchorElement
if (target.tagName === "A" && target.getAttribute("href")?.startsWith("#")) {
e.preventDefault()
const id = target.getAttribute("href")?.slice(1)
const element = document.getElementById(id || "")
if (element) {
const navHeight = 80 // Account for fixed navigation
const elementPosition = element.getBoundingClientRect().top + window.pageYOffset
const offsetPosition = elementPosition - navHeight
window.scrollTo({
top: offsetPosition,
behavior: "smooth",
})
}
}
}
document.addEventListener("click", handleAnchorClick)
return () => document.removeEventListener("click", handleAnchorClick)
}, [])
return null
}