From 04767c1e3f5cad9b2e12d5b62d679bc73c757b66 Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Tue, 30 Sep 2025 15:18:36 +0200
Subject: [PATCH] FEATURE Implementing scroll top component

---
 resources/css/components/scroll-top.css    | 7 +++++++
 resources/img/elements/carhop-arrow-up.svg | 3 +++
 resources/js/app.ts                        | 3 ++-
 resources/js/utilities/scroll-top.ts       | 8 ++++++++
 template-parts/utils/scroll-top.php        | 3 +++
 5 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 resources/css/components/scroll-top.css
 create mode 100644 resources/img/elements/carhop-arrow-up.svg
 create mode 100644 resources/js/utilities/scroll-top.ts
 create mode 100644 template-parts/utils/scroll-top.php

diff --git a/resources/css/components/scroll-top.css b/resources/css/components/scroll-top.css
new file mode 100644
index 0000000..baa5b25
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/resources/img/elements/carhop-arrow-up.svg b/resources/img/elements/carhop-arrow-up.svg
new file mode 100644
index 0000000..4d7a7c0
--- /dev/null
+++ b/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>
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 7f7433a..cc9bf38 100644
--- a/resources/js/app.ts
+++ b/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();
 });
diff --git a/resources/js/utilities/scroll-top.ts b/resources/js/utilities/scroll-top.ts
new file mode 100644
index 0000000..cfbf7b7
--- /dev/null
+++ b/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' });
+  });
+}
diff --git a/template-parts/utils/scroll-top.php b/template-parts/utils/scroll-top.php
new file mode 100644
index 0000000..a6873e6
--- /dev/null
+++ b/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>
\ No newline at end of file