Fix back to top scroll functionality

src/components/utilities/assetManager/AssetManager.vue

@@ -38,15 +38,12 @@
     <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-[15%]"></div>
 
     <!-- Assets list -->
-    <div class="overflow-auto h-full w-[35%] flex flex-col relative" ref="elementToScroll" @scroll="onScroll">
+    <div class="overflow-auto h-full w-[35%] flex flex-col relative">
       <TileList v-if="selectedCategory === 'tiles'" />
       <ObjectList v-if="selectedCategory === 'objects'" />
       <ObjectList v-if="selectedCategory === 'objects'" />
     </div>
 
-    <button class="left-[calc(50%_-_60px)] absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
-      <img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
-    </button>
     <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
 
     <!-- Asset details -->
@@ -68,24 +65,4 @@ import { useAssetManagerStore } from '@/stores/assetManager'
 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')
 
-const hasScrolled = ref(false)
-const elementToScroll = ref()
-
-const onScroll = (e: Event) => {
-  let scrollTop = (e.target as HTMLBodyElement).scrollTop
-
-  if (scrollTop > 200) {
-    hasScrolled.value = true
-  } else if (scrollTop <= 200) {
-    hasScrolled.value = false
-  }
-}
-
-function toTop() {
-  elementToScroll.value.scrollTo({
-    top: 0,
-    left: 0,
-    behavior: 'smooth'
-  })
-}
 </script>

src/components/utilities/assetManager/partials/TileList.vue

@@ -7,8 +7,8 @@
     <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </div>
-  <div v-bind="containerProps" style="height: 400px; overflow-y: auto;">
+  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
-    <div v-bind="wrapperProps">
+    <div v-bind="wrapperProps" ref="elementToScroll">
       <a
         v-for="{ data: tile } in list"
         :key="tile.id"
@@ -25,6 +25,9 @@
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
     </div>
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+      <img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+    </button>
   </div>
 </template>
 
@@ -44,6 +47,9 @@ const assetStore = useAssetStore()
 
 const searchQuery = ref('')
 
+const hasScrolled = ref(false)
+const elementToScroll = ref()
+
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
   if (!files) return
@@ -78,12 +84,26 @@ const filteredTiles = computed(() => {
 const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
   filteredTiles,
   {
-    itemHeight: 28,
+    itemHeight: 48,
   },
 )
 
 const virtualList = ref({ scrollTo })
 
+const onScroll = () => {
+  let scrollTop = elementToScroll.value.style.marginTop.replace('px', '');
+
+  if (scrollTop > 80) {
+    hasScrolled.value = true
+  } else if (scrollTop <= 80) {
+    hasScrolled.value = false
+  }
+}
+
+function toTop() {
+  virtualList.value?.scrollTo(0)
+}
+
 onMounted(() => {
   gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
     assetManagerStore.setTileList(response)