Add back to top button

components/BackToTopButton.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const scrollTop = () => {
+  window.scrollTo(0, 0);
+};
+</script>
+
+<template>
+  <div>
+    <NuxtLink class="btn app-background text-light" @click="scrollTop">
+      <MaterialIcon name="arrow-up" :size="24"/> Back to top
+    </NuxtLink>
+  </div>
+</template>

pages/champions/index.vue

@@ -15,6 +15,7 @@ watch(currentLocale, async () => {
 </script>
 
 <template>
+  <div class="d-flex flex-column gap-4">
     <div class="d-flex flex-row flex-wrap gap-4 justify-content-center">
         <div v-for="summary in summaries" :id="`${summary.id}`" 
             style="width: 200px;"
@@ -35,4 +36,8 @@ watch(currentLocale, async () => {
             </NuxtLink>
         </div>
     </div>
+    <div class="d-flex justify-content-center w-100">
+        <BackToTopButton/>
+    </div>
+  </div>
 </template>

pages/cherry-augments/index.vue

@@ -23,7 +23,7 @@ const filteredCherryAugments = computed(() => {
 </script>
 
 <template>
-  <div class="d-flex flex-column gap-2">
+  <div class="d-flex flex-column gap-4">
     <div class="d-flex flex-row justify-content-end gap-2">
       <Card class="d-flex justify-content-center align-items-center me-auto">
         <span>{{ cherryAugments.length }} augments</span>
@@ -50,5 +50,9 @@ const filteredCherryAugments = computed(() => {
         </div>
       </div>
     </div>
+
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>

pages/companions/index.vue

@@ -57,5 +57,9 @@ const p = computed(() => {
         </div>
       </div>
     </div>
+
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>

pages/items/index.vue

@@ -10,6 +10,7 @@ watch(currentLocale, async () => {
 </script>
 
 <template>
+  <div class="d-flex flex-column gap-4">
     <div class="d-flex flex-row flex-wrap gap-2 justify-content-center">
         <div v-for="item in items" :id="`${item.id}`"
             style="width: 64px;"
@@ -27,4 +28,9 @@ watch(currentLocale, async () => {
             </NuxtLink>
         </div>
     </div>
+
+    <div class="d-flex justify-content-center w-100">
+        <BackToTopButton/>
+    </div>
+  </div>
 </template>

pages/loots/index.vue

@@ -46,7 +46,7 @@ watch(currentLocale, async() => {
 </script>
 
 <template>  
-  <div class="d-flex flex-column gap-3">
+  <div class="d-flex flex-column gap-4">
     <div class="btn-group flex-wrap gap-2">
       <a class="btn btn-outline-dark" @click="clearFilter()">
         <MaterialIcon name="backspace-outline" :size="24" />
@@ -89,5 +89,9 @@ watch(currentLocale, async() => {
         </div>
       </div>
     </div>
+
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>

pages/summoner-emotes/index.vue

@@ -51,5 +51,8 @@ const p = computed(() => {
         </div>
       </div>
     </div>
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>

pages/summoner-icons/index.vue

@@ -59,5 +59,9 @@ const p = computed(() => {
             </div>
         </div>
     </div>
+
+    <div class="d-flex justify-content-center w-100">
+        <BackToTopButton/>
+    </div>
   </div>
 </template>

pages/tft-damage-skins/index.vue

@@ -52,5 +52,9 @@ const p = computed(() => {
         </div>
       </div>
     </div>
+
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>

pages/tft-map-skins/index.vue

@@ -54,5 +54,8 @@ const p = computed(() => {
         </div>
       </div>
     </div>
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>

pages/ward-skins/index.vue

@@ -30,7 +30,7 @@ const rarities = {
 </script>
 
 <template>
-  <div class="d-flex flex-column gap-2">
+  <div class="d-flex flex-column gap-4">
       <div class="d-flex gap-2 justify-content-end">
         <Card class="d-flex justify-content-center align-items-center me-auto">
             <span>{{ skins.length }} skins</span>
@@ -66,5 +66,9 @@ const rarities = {
             </div>
         </div>
       </div>
+
+      <div class="d-flex justify-content-center w-100">
+        <BackToTopButton/>
+      </div>
   </div>
 </template>