diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro index 2913255..3a96c13 100644 --- a/src/layouts/Main.astro +++ b/src/layouts/Main.astro @@ -38,4 +38,32 @@ import Navigation from '../components/Navigation.astro' ?.querySelector('html') ?.classList.toggle('pf-v6-theme-dark', themePreference === 'dark') }) + + const scrollToHash = (hash: string) => { + const targetElement = document.querySelector(hash) + if (targetElement) { + targetElement.scrollIntoView({ behavior: 'smooth' }) + } + } + + document.addEventListener('DOMContentLoaded', () => { + if (window.location.hash) { + const hash = window.location.hash + + // Without this, page would focus on anchor link without scrolling to it + history.replaceState(null, '', ' ') + + setTimeout(() => { + scrollToHash(hash) + history.replaceState(null, '', hash) + }, 500) + } + }) + + // Handle changes that happen after the initial page load + window.addEventListener('hashchange', () => { + if (window.location.hash) { + scrollToHash(window.location.hash) + } + }) diff --git a/src/styles/global.scss b/src/styles/global.scss index 25ee5f0..dd8c682 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -14,6 +14,7 @@ .ws-heading { position: relative; + scroll-margin-top: 3rem; } .ws-heading-anchor {