66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
<template>
|
|
<transition name="fade">
|
|
<button v-show="isVisible" class="back-to-top" aria-label="Zurück nach oben" @click="scrollToTop">
|
|
<span class="arrow-up"/>
|
|
</button>
|
|
</transition>
|
|
</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 lang="sass">
|
|
.back-to-top
|
|
position: fixed
|
|
bottom: 2rem
|
|
left: 2rem
|
|
background-color: rgba($darkgrey, .95)
|
|
border: 1px solid white
|
|
z-index: 100
|
|
border-radius: 50%
|
|
width: 3rem
|
|
height: 3rem
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
cursor: pointer
|
|
transition: opacity 0.4s ease-in-out
|
|
opacity: 0.8
|
|
|
|
&:hover
|
|
opacity: 1
|
|
|
|
.arrow-up
|
|
width: 0
|
|
height: 0
|
|
border-left: 8px solid transparent
|
|
border-right: 8px solid transparent
|
|
border-bottom: 12px solid white
|
|
|
|
// Transition für den Button
|
|
.fade-enter-active, .fade-leave-active
|
|
transition: opacity 0.4s ease-in-out
|
|
|
|
.fade-enter-from, .fade-leave-to
|
|
opacity: 0
|
|
</style>
|
|
|