generated from cms/tibi-docs
72 lines
1.8 KiB
Svelte
72 lines
1.8 KiB
Svelte
<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 = () => {
|
|
if (typeof window !== "undefined") {
|
|
// Jump down by 100vh
|
|
window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
if (typeof window !== "undefined") {
|
|
// Attach scroll event listener when component is mounted
|
|
window.addEventListener("scroll", checkScroll)
|
|
}
|
|
})
|
|
|
|
onDestroy(() => {
|
|
if (typeof window !== "undefined") {
|
|
// Remove scroll event listener when component is destroyed
|
|
window.removeEventListener("scroll", checkScroll)
|
|
}
|
|
})
|
|
let force = true
|
|
if (typeof window !== "undefined") {
|
|
setInterval(() => {
|
|
if (location.pathname != "/") {
|
|
force = false
|
|
} else force = true
|
|
}, 1000)
|
|
}
|
|
$: {
|
|
if (typeof window !== "undefined") {
|
|
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 {
|
|
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>
|