diff --git a/packages/webawesome/docs/assets/scripts/scroll.js b/packages/webawesome/docs/assets/scripts/scroll.js index 8a2bbe113..609c29d5e 100644 --- a/packages/webawesome/docs/assets/scripts/scroll.js +++ b/packages/webawesome/docs/assets/scripts/scroll.js @@ -1,3 +1,19 @@ +import { allDefined } from '/dist/webawesome.js'; + +/** + * Determines how the page was loaded. Possible return values include "reload", "navigate", "back_forward", "prerender", + * and "unknown". + */ +function getNavigationType() { + if (performance.getEntriesByType) { + const navEntries = performance.getEntriesByType('navigation'); + if (navEntries.length > 0) { + return navEntries[0].type; + } + } + return 'unknown'; +} + // Smooth links document.addEventListener('click', event => { const link = event.target.closest('a'); @@ -31,3 +47,26 @@ function updateScrollClass() { window.addEventListener('scroll', updateScrollClass); window.addEventListener('turbo:render', updateScrollClass); updateScrollClass(); + +// Restore scroll position after components are defined +allDefined().then(() => { + const navigationType = getNavigationType(); + const key = `wa-scroll-y-[${location.pathname}]`; + const scrollY = sessionStorage.getItem(key); + + // Only restore when reloading, otherwise clear it + if (navigationType === 'reload' && scrollY) { + window.scrollTo(0, scrollY); + } else { + sessionStorage.removeItem(key); + } + + // After restoring, keep tabs on the page's scroll position for next reload + window.addEventListener( + 'scroll', + () => { + sessionStorage.setItem(key, window.scrollY); + }, + { passive: true }, + ); +});