Files
web-temp/layers/components/blocks/Button/ScrollTop.vue
2026-01-20 13:18:56 +09:00

43 lines
912 B
Vue

<script setup lang="ts">
import type { TrackingObject } from '#layers/types/api/common'
const { locale } = useI18n()
const { y: windowY } = useWindowScroll({ behavior: 'smooth' })
const { sendLog } = useAnalytics()
const analytics = {
action_type: 'click',
click_item: 'TOP버튼',
click_sarea: 'TOP',
} as TrackingObject
const showBtn = computed(() => windowY.value > 0)
const handleScrollToTop = () => {
windowY.value = 0
sendLog(locale.value, analytics)
}
</script>
<template>
<Transition name="fade">
<AtomsButtonCircle
v-show="showBtn"
class="btn-top"
sr-only="top"
@click="handleScrollToTop"
>
<AtomsIconsArrowControlTopLine />
</AtomsButtonCircle>
</Transition>
</template>
<style scoped>
.btn-top {
@apply bg-[image:var(--button-top)] bg-center bg-cover bg-no-repeat;
}
.btn-top:hover :deep(.icon) {
@apply -translate-y-[3px];
}
</style>