FEATURE Implementing scroll top component

resources/css/components/scroll-top.css

@@ -0,0 +1,7 @@
+button#scroll-top {
+  @apply fixed lg:bottom-8 lg:right-12 bottom-4 right-4  bg-white border-2 border-solid border-primary text-primary rounded-full p-4 z-50;
+
+  img {
+    @apply h-6 w-6;
+  }
+}

resources/img/elements/carhop-arrow-up.svg

@@ -0,0 +1,3 @@
+<svg width="37" height="19" viewBox="0 0 37 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.5 18.15L18.9689 2.00003L1.5 18.15" stroke="#136F63" stroke-width="2"/>
+</svg>

resources/js/app.ts

@@ -1,7 +1,8 @@
 import menuInit from './header';
 import initFooterShapes from './footer';
-
+import handleScrollTop from './utilities/scroll-top';
 window.addEventListener('load', function () {
   // menuInit();
   initFooterShapes();
+  handleScrollTop();
 });

resources/js/utilities/scroll-top.ts

@@ -0,0 +1,8 @@
+export default function handleScrollTop() {
+  const scrollTopButton = document.getElementById('scroll-top');
+  if (!scrollTopButton) return;
+
+  scrollTopButton.addEventListener('click', () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  });
+}

template-parts/utils/scroll-top.php

@@ -0,0 +1,3 @@
+<button id="scroll-top" class="animate-hover-top">
+	<img src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/elements/carhop-arrow-up.svg" alt="Remonter en haut de la page">
+</button>