feat: added back-to-top FAB (#230)

css/style.css

@@ -333,3 +333,32 @@ footer {
   color: #bdc3c7;
   font-size: 18px;
 }
+
+.top-btn {
+  width: 50px;
+  height: 50px;
+  padding: 10px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  display: none;
+  border-radius: 50%;
+}
+
+.arrow-icon {
+  animation: bounce 2s infinite ease-in-out;
+  -webkit-animation: bounce 2s infinite ease-in-out;
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20%);
+  }
+}

index.html

@@ -1930,6 +1930,43 @@ <h3 class="name">uuphoria</h3>
 
         <p class="copyright"> Copyright © <span id="currentYear"></span> DevProfiles | All rights reserved. </p>
       </footer>
+      <button
+  id="backToTopBtn"
+  class="top-btn"
+>
+  <svg
+    width="24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    class="arrow-icon"
+  >
+    <path
+      d="M11 2.206l-6.235 7.528-.765-.645 7.521-9 7.479 9-.764.646-6.236-7.53v21.884h-1v-21.883z"
+      fill="white"
+    />
+  </svg>
+</button>
+
+<script>
+  // Get the FAB
+  var fabButton = document.getElementById("backToTopBtn");
+
+  // When the user scrolls down 20px from the top of the document, show the FAB
+  window.onscroll = function () {
+    if (window.scrollY > 20) {
+      fabButton.style.display = "block";
+    } else {
+      fabButton.style.display = "none";
+    }
+  };
+
+  // When the user clicks on the FAB, scroll to the top of the document
+  fabButton.addEventListener("click", function () {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  });
+</script>
     <script src="js/cyear.js"></script>
     <script src="js/search.js"></script>
     <script src="js/theme.js"></script>