add scrollToTop button

layouts/default.vue

@@ -2,6 +2,12 @@
 	<div class="app">
 		<NavigationBar :breadcrumb="breadcrumb" :menus="menus" />
 		<Nuxt />
+		<a
+			class="scrollToTop bg-primary position-fixed text-white d-flex align-items-center justify-content-center rounded"
+			href="#"
+			@click="scrollToTop($event)">
+			↑
+		</a>
 	</div>
 </template>
 
@@ -37,6 +43,26 @@ export default {
 			]
 		}
 	},
+	methods: {
+		scrollToTop(e) {
+			window.scrollTo({ top: 0, behavior: "smooth" })
+			e.preventDefault()
+		}
+	},
+	beforeMount() {
+		let animated = false
+		window.addEventListener("scroll", function (e) {
+			if (window.scrollY > 250 && !animated) {
+				$(".scrollToTop").css("right", "1rem")
+			} else {
+				animated = true
+				setTimeout(function () {
+					animated = false
+				}, 300)
+				$(".scrollToTop").css("right", "-4rem")
+			}
+		})
+	},
 	created() {
 		this.$nuxt.$on("changeRoute", (breadcrumb) => {
 			this.breadcrumb = breadcrumb
@@ -69,6 +95,7 @@ export default {
 
 .app {
 	transition: margin 0.5s ease-in-out;
+	scroll-behavior: smooth;
 }
 main {
 	--paddingTop: 96px;
@@ -92,4 +119,19 @@ main {
 .fade-leave-to {
 	opacity: 0;
 }
+
+.scrollToTop {
+	z-index: 100;
+	bottom: 1rem;
+	right: -4rem;
+	font-size: 2rem;
+	width: 50px;
+	height: 50px;
+	opacity: 0.7;
+	transition: all 0.3s ease-in;
+
+	&:hover {
+		opacity: 1;
+	}
+}
 </style>