Add scroll to top button

hypha/core/components.py

@@ -14,3 +14,8 @@ class DropdownMenu(component.Component):
 
     def get_context_data(self, **kwargs) -> dict:
         return {"id": str(uuid.uuid4())}
+
+
+@component.register("scroll-to-top")
+class ScrollToTop(component.Component):
+    template_name = "components/scroll-to-top.html"

hypha/core/templates/components/scroll-to-top.html

@@ -0,0 +1,14 @@
+{% load heroicons %}
+
+<template x-teleport="body" x-data="{scrollBackTop: false, lastScrollTop: 0}">
+    <button
+        x-show="scrollBackTop"
+        x-transition
+        x-transition.duration.500ms
+        x-on:scroll.window.throttle.50ms="scrollBackTop = (window.pageYOffset < lastScrollTop && window.pageYOffset > window.outerHeight * 0.4) ? true : false; lastScrollTop = window.pageYOffset;"
+        @click="window.scrollTo({top: 0, behavior: 'smooth'})"
+        aria-label="Back to top"
+        class="fixed top-0 right-1/2 px-3 py-2 mt-10 -mr-[64px] text-white bg-light-blue/80 z-30 hover:bg-light-blue hover:text-white hover:shadow-lg transition-all focus:outline-none cursor-pointer shadow-lg rounded-2xl">
+        {% heroicon_mini "arrow-long-up" class="inline align-text-bottom" size=18 aria_hidden=true %} Back to top
+    </button>
+</template>

hypha/templates/base-apply.html

@@ -199,6 +199,10 @@
 
         <footer class="footer"></footer>
 
+        {% block scroll_to_top %}
+            {% #scroll-to-top %}
+        {% endblock scroll_to_top %}
+
         {% cookie_banner %}
 
         <script src="{% static 'js/main.js' %}"></script>