icon cycle circle

frontend/src/lib/components/widgets/scrollDown.svelte

@@ -0,0 +1,62 @@
+<script>
+    import { onMount, onDestroy } from "svelte"
+    import { rerender } from "../../store"
+
+    let showButton = true
+
+    const checkScroll = () => {
+        // Change the visibility of the button based on the scroll position
+        showButton = window.pageYOffset < 100
+    }
+
+    const jumpDown = () => {
+        // Jump down by 100vh
+        window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
+    }
+
+    onMount(() => {
+        // Attach scroll event listener when component is mounted
+        window.addEventListener("scroll", checkScroll)
+    })
+
+    onDestroy(() => {
+        // Remove scroll event listener when component is destroyed
+        window.removeEventListener("scroll", checkScroll)
+    })
+    let force = true
+    setInterval(() => {
+        if (location.pathname != "/") {
+            force = false
+        } else force = true
+    }, 1000)
+    $: {
+        if ($rerender) {
+            if (location.pathname != "/") {
+                force = false
+            } else force = true
+        }
+    }
+</script>
+
+{#if showButton && force}
+    <button on:click="{jumpDown}" class="jump-down"
+        ><span> SCROLL </span>
+        <img src="/media/chev-d.svg" alt="arrow" />
+    </button>
+{/if}
+
+<style>
+    .jump-down {
+        /* Place your styles here */
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: fixed;
+        color: #4f4f4f;
+        z-index: 100;
+        gap: 5px;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+</style>