From 60110b1885f63dd7d2d834db3fe74d4e05a53a13 Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Thu, 25 Sep 2025 20:53:58 +0300
Subject: [PATCH] scroll to top button added

---
 src/components/ScrollToTopButton.vue | 77 ++++++++++++++++++++++++++++
 src/views/ChartsView.vue             |  2 +
 src/views/CollectionView.vue         |  2 +
 3 files changed, 81 insertions(+)
 create mode 100644 src/components/ScrollToTopButton.vue

diff --git a/src/components/ScrollToTopButton.vue b/src/components/ScrollToTopButton.vue
new file mode 100644
index 0000000..2b88819
--- /dev/null
+++ b/src/components/ScrollToTopButton.vue
@@ -0,0 +1,77 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+const threshold = 300
+const isVisible = ref(false)
+
+const handleScroll = () => {
+  isVisible.value = window.scrollY > threshold
+}
+
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth'
+  })
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, { passive: true })
+  handleScroll()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<template>
+  <transition name="fade">
+    <button
+      v-show="isVisible"
+      class="scroll-to-top-button"
+      @click="scrollToTop"
+      aria-label="Прокрутить наверх"
+    >
+
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+        <path d="M12 19V5M5 12l7-7 7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+  </transition>
+</template>
+
+<style scoped>
+.scroll-to-top-button {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: var(--primary-color, #18a058);
+  color: white;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  transition: transform 0.2s, background-color 0.2s;
+}
+
+.scroll-to-top-button:hover {
+  background-color: var(--primary-color-hover, #148246);
+  transform: translateY(-2px);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/views/ChartsView.vue b/src/views/ChartsView.vue
index 6b5e365..d86e6d4 100644
--- a/src/views/ChartsView.vue
+++ b/src/views/ChartsView.vue
@@ -5,6 +5,7 @@ import PeriodSelector from '@/components/PeriodSelector.vue'
 import ChartsCard from '@/views/ChartsView/ChartsCard.vue'
 import router from '@/router/index.js'
 import ChartsSearch from '@/views/ChartsView/ChartsSearch.vue'
+import ScrollToTopButton from '@/components/ScrollToTopButton.vue'
 
 const { getChartsPrices } = useChartsApi()
 
@@ -62,6 +63,7 @@ const filteredPrices = computed(() => {
       </router-link>
     </n-gi>
   </n-grid>
+  <ScrollToTopButton />
 </template>
 
 <style scoped>
diff --git a/src/views/CollectionView.vue b/src/views/CollectionView.vue
index d453717..d3fc1a5 100644
--- a/src/views/CollectionView.vue
+++ b/src/views/CollectionView.vue
@@ -3,6 +3,7 @@ import CollectionToolbar from '@/views/CollectionView/CollectionToolbar.vue'
 import CollectionMerchCard from '@/views/CollectionView/CollectionMerchCard.vue'
 import { computed, onMounted, ref } from 'vue'
 import { useMerchApi } from '@/api/merch.js'
+import ScrollToTopButton from '@/components/ScrollToTopButton.vue'
 
 const merchList = ref(null)
 const loading = ref(true)
@@ -48,6 +49,7 @@ const filteredMerch = computed(() => {
       </router-link>
     </n-gi>
   </n-grid>
+  <ScrollToTopButton />
 </template>
 
 <style scoped></style>