Add Go to top component

package.json

@@ -11,6 +11,7 @@
     "autoprefixer": "^9.7.6",
     "core-js": "^3.6.4",
     "highlight.js": "^10.0.2",
+    "jquery": "^3.5.1",
     "js-beautify": "^1.11.0",
     "tailwindcss": "^1.4.4",
     "vue": "^2.6.11",

src/components/Main.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container mx-auto px-6">
+    <div class="container mx-auto px-6" id="main">
         <div class="py-16 text-center">
             <h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>
 
@@ -29,6 +29,8 @@
                 </view-component>
             </div>
         </div>
+
+        <goto-top></goto-top>
     </div>
 </template>
 
@@ -72,6 +74,7 @@ import FooterWithSubscribeForm from "./UI/Footers/FooterWithSubscribeForm";
 
 import Component from "../Models/Component";
 import ViewComponent from "./Utilities/ViewComponent";
+import GotoTop from "./Utilities/GotoTop";
 
 export default {
     components: {
@@ -111,6 +114,7 @@ export default {
         SimpleFooter,
         FooterWithSubscribeForm,
 
+        GotoTop,
         ViewComponent,
     },
     data() {

src/components/Utilities/CodeSnippet.vue

@@ -5,25 +5,25 @@
 </template>
 
 <script>
-    import hljs from 'highlight.js/lib/core';
+import hljs from 'highlight.js/lib/core';
 
-    hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));
-    import 'highlight.js/styles/atom-one-dark.css';
+hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));
+import 'highlight.js/styles/atom-one-dark.css';
 
-    export default {
-        props: ['code'],
-        mounted() {
-            this.highlightCode();
-        },
+export default {
+    props: ['code'],
+    mounted() {
+        this.highlightCode();
+    },
 
-        methods: {
-            highlightCode() {
-                this.$nextTick(() => {
-                    document.querySelectorAll('pre code').forEach((block) => {
-                        hljs.highlightBlock(block);
-                    });
+    methods: {
+        highlightCode() {
+            this.$nextTick(() => {
+                document.querySelectorAll('pre code').forEach((block) => {
+                    hljs.highlightBlock(block);
                 });
-            },
+            });
         },
-    }
+    },
+}
 </script>

src/components/Utilities/GotoTop.vue

@@ -0,0 +1,24 @@
+<template>
+    <a id="goToTop" href="#main" class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md hidden">
+        <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
+        </svg>
+    </a>
+</template>
+
+<script>
+import $ from "jquery";
+
+export default {
+    mounted() {
+        $(document).scroll(function() {
+            let y = $(this).scrollTop();
+            if (y > 800) {
+                $('#goToTop').fadeIn();
+            } else {
+                $('#goToTop').fadeOut();
+            }
+        });
+    }    
+}
+</script>