fixed back to top button

Author: priyarai121

assets/css/style.css

@@ -2051,4 +2051,36 @@ textarea.input-field {
     left: 0;
   }
 
-}
+}
+
+
+
+
+.back-top-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: var(--gold-crayola);
+  color: var(--smoky-black-1);
+  font-size: 22px;
+  width: 50px;
+  height: 50px;
+  border-radius: var(--radius-circle);
+  display: grid;
+  place-items: center;
+  box-shadow: var(--shadow-1);
+  transition: var(--transition-1);
+  opacity: 0;
+  visibility: hidden;
+  z-index: 4;
+}
+
+.back-top-btn:is(:hover, :focus-visible) {
+  background-color: var(--white);
+  color: var(--gold-crayola);
+}
+
+.back-top-btn.active {
+  opacity: 1;
+  visibility: visible;
+}

assets/js/script.js

@@ -143,4 +143,24 @@ window.addEventListener("mousemove", function (event) {
     parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`;
   }
 
-});
+});
+
+
+
+const backTopBtn = document.querySelector("[data-back-top-btn]");
+
+const toggleButton = () => {
+    if (window.scrollY > 100) {
+        backTopBtn.classList.add("active");
+    } else {
+        backTopBtn.classList.remove("active");
+    }
+};
+
+window.addEventListener("scroll", toggleButton);
+
+backTopBtn.addEventListener("click", () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+});
+
+

index.html

@@ -1064,8 +1064,9 @@ <h3 class="card-title title-2 text-center">
   </main>
 
 
-
-
+  <a href="#top" class="back-top-btn active" data-back-top-btn>
+    <ion-icon name="caret-up"></ion-icon>
+</a>
 
   <!-- 
     - #FOOTER