diff --git a/resources/js/pageScroller.js b/resources/js/pageScroller.js new file mode 100644 index 0000000..5937ad7 --- /dev/null +++ b/resources/js/pageScroller.js @@ -0,0 +1,38 @@ +function handleScrollButonDisplay() { + const pageScroller = document.querySelector('#page-scroller'); + + if ( + document.body.scrollTop > window.innerHeight / 2 || + document.documentElement.scrollTop > window.innerHeight / 2 + ) { + pageScroller.removeAttribute('aria-hidden'); + } else { + pageScroller.setAttribute('aria-hidden', 'true'); + } +} +function scrollTop() { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); +} +function scrollToFilters() { + const filters = document.querySelector('.filters-toolbar'); + filters.scrollIntoView({ + behavior: 'smooth', + }); +} + +export default function pageScrollerInit() { + const pageScroller = document.querySelector('#page-scroller'); + if (!pageScroller) return; + window.addEventListener('scroll', handleScrollButonDisplay); + + const scrollTopBtn = document.querySelector('#scroller-top'); + if (!scrollTopBtn) return; + scrollTopBtn.addEventListener('click', scrollTop); + + const scrollerFilterBtn = document.querySelector('#scroller-filter'); + if (!scrollerFilterBtn) return; + scrollerFilterBtn.addEventListener('click', scrollToFilters); +} diff --git a/template-components/header/page-scroller.php b/template-components/header/page-scroller.php index 4cb3410..406593f 100644 --- a/template-components/header/page-scroller.php +++ b/template-components/header/page-scroller.php @@ -1,6 +1,13 @@ + -