Add scroller arrow

src/components/Scroller.vue

@@ -0,0 +1,52 @@
+<template>
+  <transition name="fade" mode="in-out">
+    <div
+      @click.prevent="scrollToTop"
+      data-blobity
+      data-blobity-radius="24"
+      data-blobity-magnetic="false"
+      class="z-index-5 fixed bottom-4 right-4 duration-300 hidden md:block"
+      v-show="scrollPosition > 150"
+    >
+      <ArrowUpIcon />
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import {defineComponent, onMounted, onUnmounted, ref, useRouter} from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  name: "Scroller",
+  setup() {
+    const scrollPosition = ref(0)
+
+    const scrollToTop = () => {
+      window.scrollTo({top: 0, behavior: 'smooth'});
+    }
+
+    const updateScroll = () => {
+      scrollPosition.value = window.scrollY
+    }
+
+    onMounted(() => {
+      window.addEventListener('scroll', updateScroll);
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('scroll', updateScroll)
+    })
+
+    return {
+      scrollPosition,
+      scrollToTop
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+</style>

src/layouts/default.vue

@@ -14,6 +14,7 @@
         >
           <Announce />
           <Header />
+          <Scroller />
           <Nuxt class="pt-16 content"/>
           <Footer />
         </div>
@@ -45,7 +46,7 @@ export default {
       }, 500)
     }
 
-    const blobity = useBlobity(options)
+    useBlobity(options)
 
     return {
       opened: computed(() => store.state.opened),