From 7a45145921ab29a1a0b7547df45464ae4e5140f9 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 23 Jun 2024 14:24:10 +0200
Subject: [PATCH] Finish functionality back to top button on asset list

---
 .../utilities/assetManager/AssetManager.vue        | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index af83d54..0985c09 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -19,7 +19,7 @@
     <div class="divider categories"></div>
 
     <!-- Assets -->
-    <div class="assets active" @scroll="onScroll">
+    <div class="assets active" ref="elementToScroll" @scroll="onScroll">
       <div class="asset">
         <input class="input-cyan search-field" placeholder="Search..." />
       </div>
@@ -48,7 +48,7 @@
     <div class="assets">
 
     </div>
-    <button class="back-to-top" v-show="hasScrolled">
+    <button class="back-to-top" v-show="hasScrolled" @click="toTop">
       <img src="/assets/icons/zoneEditor/chevron.svg" />
     </button>
     <div class="divider assets-list"></div>
@@ -83,6 +83,7 @@ const socket = useSocketStore()
 const tileUploadField = ref(null)
 const tiles = ref()
 const hasScrolled = ref(false)
+const elementToScroll = ref() 
 
 const onScroll = (e: Event) => {
   let scrollTop = (e.target as HTMLBodyElement).scrollTop
@@ -94,6 +95,15 @@ const onScroll = (e: Event) => {
   }
 }
 
+function toTop() {
+  elementToScroll.value.scrollTo({
+    top: 0,
+    left: 0,
+    behavior: "smooth",
+  });
+}
+
+
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
   if (!files) return