Merge pull request #2 from JulienR1/feature/back-to-top

Back to top arrow
JulienR1 · Jan 30, 2025 · 9d3d67c · 9d3d67c
2 parents e5ce0dd + e135510
commit 9d3d67c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/packages/web/src/components/TopArrow.astro b/packages/web/src/components/TopArrow.astro
@@ -0,0 +1,29 @@
+<a
+  href="#"
+  id="back-to-top"
+  title="Retour en haut"
+  class="fixed flex items-center justify-center w-10 h-10 bottom-6 right-6 group/back-to-top opacity-0 invisible data-[show=true]:visible data-[show=true]:opacity-100 transition-all select-none"
+  data-show="false"
+>
+  <div class="absolute w-full h-full bg-black rounded-full opacity-80"></div>
+  <span
+    class="text-4xl text-slate-100 z-10 group-hover/back-to-top:-translate-y-1 transition-all material-symbols-outlined"
+  >
+    keyboard_arrow_up
+  </span>
+</a>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const arrow = document.getElementById("back-to-top")!;
+
+    arrow.addEventListener("click", function (e) {
+      e.preventDefault();
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    });
+
+    window.addEventListener("scroll", function () {
+      arrow.dataset.show = (window.scrollY >= 200).toString();
+    });
+  });
+</script>
diff --git a/packages/web/src/layouts/Layout.astro b/packages/web/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
+import TopArrow from "../components/TopArrow.astro";
 ---
 
 <!doctype html>
@@ -39,6 +40,7 @@ import Footer from "../components/Footer.astro";
       <slot />
     </main>
     <Footer />
+    <TopArrow />
   </body>
 </html>