Add Scroll To Top button

assets/js/main.js

@@ -100,3 +100,15 @@ if (header !== null) {
     }
   }, 250));
 }
+// Scroll to Top button Toggle
+//
+const scroll = document.querySelector(".scroll-up"), rootElement = document.documentElement;
+
+function handleScroll() {
+  if (rootElement.scrollTop / (rootElement.scrollHeight - rootElement.clientHeight) > 0.4) {
+    scroll.classList.remove("hide");scroll.classList.add("show");
+  } else {
+    scroll.classList.add("hide");scroll.classList.remove("show");
+  }
+}
+document.addEventListener("scroll", handleScroll);

assets/scss/_scroll.scss

@@ -0,0 +1,16 @@
+.scroll-up{
+    position: fixed;
+    bottom: 10%;
+    right: 0;
+    z-index: 1;
+    opacity: 0;
+    transition: all 0.5s ease;
+}
+.hide{
+    opacity: 0;
+    transform: translateY(20px);
+}
+.show{
+    opacity: 1;
+    transform: translateY(0);
+  }

assets/scss/style.scss

@@ -2,6 +2,7 @@
 @import "normalize.scss";
 @import "syntax.scss";
 @import "animate.scss";
+@import "scroll.scss";
 
 /* Webkit Scrollbar Customize */
 ::-webkit-scrollbar {