Scroll to the top

ScrollTop.vue

<template>
    <div
        class="scroll-top"
        :class="{ active: isVisible }"
        @click="scrollToTop"
    >
        <i class="fas fa-chevron-up"></i>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const isVisible = ref(false)

const toggleVisibility = () => {
    isVisible.value = window.scrollY > 100
}

const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}

onMounted(() => {
    window.addEventListener('scroll', toggleVisibility)
})

onUnmounted(() => {
    window.removeEventListener('scroll', toggleVisibility)
})
</script>

<style scoped>
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background: #3498db;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.scroll-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.scroll-top:hover {
    background: #1d3557;
    color: #fff;
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
}
</style>