fixed back to top button (issue #29)

assets/css/style.css

@@ -2051,4 +2051,37 @@ textarea.input-field {
     left: 0;
   }
 
-}
+}
+
+
+
+.back-top-btn {
+  z-index: 4;
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #e8cb57;
+  color: #1a1a1a;
+  font-size: 24px;
+  width: 55px;
+  height: 55px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  transition: background-color 0.3s ease, opacity 0.3s ease;
+}
+
+.back-top-btn:hover, .back-top-btn:focus-visible {
+  background-color: #ffffff;
+  color: #e4c33d;
+}
+
+.back-top-btn.active {
+  opacity: 1;
+  visibility: visible;
+}
+

assets/js/script.js

@@ -143,4 +143,21 @@ window.addEventListener("mousemove", function (event) {
     parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`;
   }
 
-});
+});
+
+
+
+const backTopBtn = document.querySelector("[data-back-top-btn]");
+
+const toggleButtonVisibility = () => {
+    const shouldShowButton = window.scrollY >= 50; 
+    backTopBtn.classList.toggle("active", shouldShowButton);
+
+    backTopBtn.style.zIndex = shouldShowButton ? '4' : '';
+};
+
+window.addEventListener("scroll", toggleButtonVisibility);
+
+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