<script>
    import { fly } from 'svelte/transition'
    import { onMount, onDestroy } from 'svelte';
    let show = false;

    function scrollUp() {
        document.body.scrollIntoView({behavior: "smooth"})
    }

    onMount(() => {
        window.onscroll = () => {
            if (window.scrollY > 60) {
                show = true
            } else {
                show = false
            }
        }
    });

    onDestroy(() => {
        window.onscroll = () => {}
    });
</script>

<style>
    #backtotop {
        border-radius: 100%;
        width: 50px;
        height: 50px;
        position: fixed;
        right: 4%;
        bottom: 10%;
    }

</style>

{#if (show)}
    <button id="backtotop"
    transition:fly="{{ y : 200, duration:400}}"
    on:click={scrollUp}>
        ▲
    </button>
{/if}