Show scroll top button

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 {

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 %}