introducing page scroller

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);
+}

template-components/header/page-scroller.php

@@ -1,6 +1,13 @@
 <?php
 ?>
+<!-- <button>salut</button> -->
 
-<div id="scroller-top" aria-hidden="true">
-	<img class="arrow-icon" src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/arrow-scroll-top.svg' ?>" alt=''>
+<div id="page-scroller" aria-hidden="true">
+	<?php if (is_page_template('template-publications.php')) : ?>
+		<button id="scroller-filter"><?php echo __("Modifier les filtres", "homegrade-theme__texte-fonctionnel") ?></button>
+	<?php endif; ?>
+
+	<button id="scroller-top">
+		<img class="arrow-icon" src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/arrow-scroll-top.svg' ?>" alt=''>
+	</button>
 </div>