Website/components/custom/UseScrollToHash.js
2025-04-08 14:37:17 +07:00

35 lines
1.1 KiB
JavaScript

"use client";
import { useEffect, useCallback } from "react";
import { usePathname } from "next/navigation";
export function useScrollToHash() {
const pathname = usePathname();
const scrollToHash = useCallback(() => {
const hash = window.location.hash;
if (hash) {
setTimeout(() => {
const elementId = hash.substring(1);
const element = document.getElementById(elementId);
if (element) {
const yOffset = -100; // Adjust this value as needed
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({ top: y, behavior: "smooth" });
}
}, 0);
}
}, []);
useEffect(() => {
if (window.location.hash) {
scrollToHash();
}
}, [pathname, scrollToHash]);
useEffect(() => {
window.addEventListener("hashchange", scrollToHash);
return () => window.removeEventListener("hashchange", scrollToHash);
}, [scrollToHash]);
}