From 6737d1c7eef1d3e1fb75ae6ce9349a6227c94165 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Fri, 25 Oct 2024 13:48:10 +1000
Subject: [PATCH] Show scroll top button

---
 webapp/home/static/home/css/about.css | 13 +++++++++++++
 webapp/home/templates/home/about.html | 22 ++++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/webapp/home/static/home/css/about.css b/webapp/home/static/home/css/about.css
index 64fd572..73a84d9 100644
--- a/webapp/home/static/home/css/about.css
+++ b/webapp/home/static/home/css/about.css
@@ -22,6 +22,19 @@ section:last-child {
 .textbox {
   margin: 4rem;
 }
+#scrollToTop {
+  position: fixed;
+  bottom: -5rem;
+  right: 2rem;
+  background-color: var(--color);
+  color: white;
+  padding: .25rem;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.25s ease;
+  transition: bottom 1s ease;
+  font-size: 2rem;
+}
 
 /* Lists */
 ol.nested > li {
diff --git a/webapp/home/templates/home/about.html b/webapp/home/templates/home/about.html
index 21c20a7..b24c4a4 100644
--- a/webapp/home/templates/home/about.html
+++ b/webapp/home/templates/home/about.html
@@ -81,12 +81,34 @@ <h1> About Galaxy Australia </h1>
       {% include 'home/snippets/about/service-levels.html' %}
     </section>
   </div>
+
+  <div
+    id="scrollToTop"
+    title="Scroll to top"
+    data-bs-toggle="tooltip"
+    onclick="window.scrollTo(0, 0); window.location.hash = '';"
+  >
+    <i class="fas fa-arrow-up"></i>
+  </div>
 </main>
 {% endblock %}
 
 
 {% block script %}
 <script src="{% static 'home/js/scroll-hash.js' %}" ></script>
+
+<script>
+  // Scroll event handler to show/hide the floating "scroll-to-top" element
+  window.addEventListener('scroll', function() {
+    const scrollPosition = window.scrollY || document.documentElement.scrollTop;
+    const targetElement = document.getElementById('scrollToTop');
+    if (scrollPosition > 500) {
+      targetElement.style.bottom = '2rem'; // Show the element
+    } else {
+      targetElement.style.bottom = '-5rem'; // Hide the element
+    }
+  });
+</script>
 {% endblock %}