COA

Author: Amey-Thakur

PAL/index.html

@@ -745,6 +745,11 @@ <h4 class="mt-2 mb-3 text-primary-theme fw-bold">Booth's Algorithm Visualizer</h
     <!-- Dependencies -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
+    <!-- Back to Top Button -->
+    <button type="button" class="btn" id="btn-back-to-top" aria-label="Back to Top">
+        <i class="fas fa-arrow-up" aria-hidden="true"></i>
+    </button>
+
     <!-- Custom Scripts -->
     <script src="script.js"></script>
 

PAL/script.js

@@ -556,3 +556,22 @@ document.addEventListener('keydown', (e) => {
         return false;
     }
 });
+
+// =========================================
+//   BACK TO TOP BUTTON
+// =========================================
+const backToTopBtn = document.getElementById('btn-back-to-top');
+
+if (backToTopBtn) {
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 300) {
+            backToTopBtn.style.display = 'flex';
+        } else {
+            backToTopBtn.style.display = 'none';
+        }
+    });
+
+    backToTopBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+}

PAL/style.css

@@ -1347,3 +1347,32 @@ section {
     font-size: 0.8rem;
     animation: bounce 2s infinite;
 }
+
+/* =========================================
+   BACK TO TOP BUTTON
+   ========================================= */
+#btn-back-to-top {
+    position: fixed;
+    bottom: 25px;
+    right: 25px;
+    display: none;
+    z-index: 1000;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    box-shadow: var(--shadow-md);
+    transition: all 0.3s;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+}
+
+#btn-back-to-top:hover {
+    transform: translateY(-5px);
+    background: var(--accent-color);
+    filter: brightness(1.1);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}