PronounsPage/components/ScrollButton.vue

<script setup lang="ts">
import { useWindowScroll } from '@vueuse/core';

withDefaults(defineProps<{
    colour?: string;
}>(), {
    colour: 'primary',
});
const config = useConfig();

const { y } = useWindowScroll();

const shown = computed(() => y.value > 300);

const scroll = () => {
    y.value = 0;
};
</script>

<template>
    <div
        :class="['scroll-btn', 'd-print-none', config.ads && config.ads.enabled ? 'higher' : '']"
        :style="`opacity: ${shown ? 1 : 0}`"
        @click.prevent="scroll"
    >
        <SquareButton link="#" :colour="colour" :aria-label="$t('table.scrollUp')">
            <Icon v="arrow-alt-up" />
        </SquareButton>
    </div>
</template>

<style lang="scss" scoped>
    @import "assets/variables";

    .scroll-btn {
        position: fixed;
        bottom: $spacer;
        right: $spacer;
        transition: all .5s ease-in-out;
        z-index: 1030;
    }

    @include media-breakpoint-down('lg', $grid-breakpoints) {
        .higher {
            bottom: 3*$spacer;
        }
    }
    @include media-breakpoint-up('lg', $grid-breakpoints) {
        .higher {
            z-index: 100001;
            bottom: 5 * $spacer;
        }
    }
</style>