diff --git a/src/shared/lib/utils/smoothScroll/smoothScroll.ts b/src/shared/lib/utils/smoothScroll/smoothScroll.ts new file mode 100644 index 0000000..9f3c616 --- /dev/null +++ b/src/shared/lib/utils/smoothScroll/smoothScroll.ts @@ -0,0 +1,32 @@ +/** + * Smoothly scrolls to the target element when an anchor element is clicked. + * @param node - The anchor element to listen for clicks on. + */ +export function smoothScroll(node: HTMLAnchorElement) { + const handleClick = (event: MouseEvent) => { + event.preventDefault(); + + const hash = node.getAttribute('href'); + if (!hash || hash === '#') return; + + const targetElement = document.querySelector(hash); + + if (targetElement) { + targetElement.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }); + + // Update URL hash without jumping + history.pushState(null, '', hash); + } + }; + + node.addEventListener('click', handleClick); + + return { + destroy() { + node.removeEventListener('click', handleClick); + }, + }; +}