Back to Top Button

<template>
  <button
    :class="[
      'fixed bottom-6 right-6 p-4 rounded-full shadow-lg transition-all duration-300',
      'bg-gray-200 text-gray-700',
      'dark:bg-gray-700 dark:text-gray-200 dark:shadow-lg-dark',
      'hover:shadow-xl hover:-translate-y-1',
      'dark:hover:shadow-xl-dark dark:hover:-translate-y-1',
    ]"
    @click="scrollToTop"
    v-show="isVisible"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M5 10l7-7m0 0l7 7m-7-7v18"
      />
    </svg>
  </button>
</template>

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

const isVisible = ref(false);

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

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

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

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

<style scoped>
.shadow-lg {
  box-shadow: 7px 7px 14px #cbced1, -7px -7px 14px #ffffff;
}

.shadow-xl {
  box-shadow: 9px 9px 18px #cbced1, -9px -9px 18px #ffffff;
}

.dark .shadow-lg-dark {
  box-shadow: 7px 7px 14px #4a4a4a, -7px -7px 14px #626262;
}

.dark .shadow-xl-dark {
  box-shadow: 9px 9px 18px #4a4a4a, -9px -9px 18px #626262;
}
</style>