From aa706ca1c216c6f29087c7b9f41549232a9f603d Mon Sep 17 00:00:00 2001
From: Cian Hughes <chughes000@gmail.com>
Date: Fri, 10 Jan 2025 12:26:41 +0000
Subject: [PATCH] Added scroll to top component and associated animation

---
 src/LandingPage/NavigationFooter.svelte  |  7 +++++-
 src/shared_components/ScrollToTop.svelte | 28 ++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 src/shared_components/ScrollToTop.svelte

diff --git a/src/LandingPage/NavigationFooter.svelte b/src/LandingPage/NavigationFooter.svelte
index 7b9616b..11f0703 100644
--- a/src/LandingPage/NavigationFooter.svelte
+++ b/src/LandingPage/NavigationFooter.svelte
@@ -1,5 +1,7 @@
 <script>
     import "./NavigationFooter.scss";
+    import "../shared_components/ScrollToTop.svelte";
+    import ScrollToTop from "../shared_components/ScrollToTop.svelte";
 </script>
 
 <div class="navigation-footer">
@@ -37,7 +39,10 @@
         </div>
     </div>
     <div class="navigation-footer-column-mid">
-        <div class="navigation-footer-return">↥↥↥ Return to top ↥↥↥</div>
+        <ScrollToTop
+            class="navigation-footer-return"
+            text="↥↥↥ Return to top ↥↥↥"
+        />
     </div>
     <div class="navigation-footer-column-right">
         <div class="navigation-footer-topic-column">
diff --git a/src/shared_components/ScrollToTop.svelte b/src/shared_components/ScrollToTop.svelte
new file mode 100644
index 0000000..04f392b
--- /dev/null
+++ b/src/shared_components/ScrollToTop.svelte
@@ -0,0 +1,28 @@
+<script>
+    export let text = "Return to top";
+
+    function scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth",
+        });
+    }
+
+    function handleKeydown(event) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            scrollToTop();
+        }
+    }
+</script>
+
+<span
+    class="cursor-pointer {$$props.class}"
+    style="cursor: pointer;"
+    on:click={scrollToTop}
+    on:keydown={handleKeydown}
+    tabindex="0"
+    role="button"
+>
+    {text}
+</span>