add back to top button

index.html

@@ -247,6 +247,12 @@ <h2>Projects</h2>
     </div> <!-- /preview-section -->
   </div> <!-- /main-container -->
 
+
+
+     <!-- Back to Top Button -->
+    <button id="backToTopBtn" title="Go to top">↑</button>
+
+
   <footer style="margin-top: 2rem; padding: 1rem 0; text-align: center; font-size: 0.9rem;" class="footer">
   <div class="foot">
     <p class="footer-text">&copy; 2025. All rights reserved.</p>

script.js

@@ -507,3 +507,25 @@ function clearAndReload() {
   sessionStorage.clear();        
   window.location.reload();
 }
+
+//back to top button
+// Back to Top Button Functionality
+document.addEventListener("DOMContentLoaded", function () {
+  const backToTopBtn = document.createElement("button");
+  backToTopBtn.id = "backToTopBtn";
+  backToTopBtn.title = "Go to top";
+  backToTopBtn.textContent = "↑";
+  document.body.appendChild(backToTopBtn);
+
+  window.addEventListener("scroll", function () {
+    if (window.scrollY > 50) {
+      backToTopBtn.classList.add("show");
+    } else {
+      backToTopBtn.classList.remove("show");
+    }
+  });
+
+  backToTopBtn.addEventListener("click", function () {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  });
+});

style.css

@@ -377,3 +377,32 @@ body.dark .footer-link {
 .section {
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
+
+/* Back to Top Button */
+/* Back to Top Button */
+
+#backToTopBtn {
+  display: none;
+  position: fixed;
+  bottom: 40px;
+  right: 40px;
+  z-index: 999;
+  font-size: 20px;
+  background-color: #3b82f6;
+  color: #f7f9fc;
+  border: none;
+  outline: none;
+  padding: 12px 16px;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+  transition: opacity 0.3s ease;
+  opacity: 0;
+}
+#backToTopBtn.show {
+  display: block;
+  opacity: 1;
+}
+#backToTopBtn:hover {
+  background-color: #1e40af;
+}