29 lines
813 B
Vue
29 lines
813 B
Vue
<script setup lang="ts">
|
|
const { y: windowY } = useWindowScroll({ behavior: 'smooth' })
|
|
|
|
const showBtn = computed(() => windowY.value > 0)
|
|
|
|
const handleScrollToTop = () => {
|
|
windowY.value = 0
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="fade">
|
|
<button v-if="showBtn" class="btn-top" @click="handleScrollToTop">
|
|
<span class="sr-only">top</span>
|
|
</button>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.btn-top {
|
|
@apply relative rounded-full bg-[image:var(--button-top)] bg-center bg-cover bg-no-repeat
|
|
w-[40px] h-[40px] md:w-[48px] md:h-[48px]
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-full after:opacity-0 after:transition-all after:duration-300 after:ease-in-out;
|
|
}
|
|
.btn-top:hover {
|
|
@apply after:opacity-10;
|
|
}
|
|
</style>
|