Add dynamic scroll to top/bottom button

index.html

@@ -173,5 +173,9 @@ <h3>MNP Records</h3>
         </table>
     </div>
     <script src="script.js"></script>
+
+    <!-- Scroll Toggle Button -->
+    <button id="scrollToggleBtn" aria-label="Scroll to bottom" title="Scroll to bottom">↓</button>
+
 </body>
 </html>

script.js

@@ -326,3 +326,81 @@ function updateMonthlyStats() {
         statBoxes[3].innerHTML = `Total MNP This Month <br><br>${monthlyMNP}`;
     }
 }
+
+
+// Scroll Toggle Button Logic
+(function(){
+    const btn = document.getElementById('scrollToggleBtn');
+    if (!btn) return;
+
+    const scrollToBottom = () => {
+        window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
+    };
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+    const updateButtonState = () => {
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+        const docHeight = Math.max(
+            document.body.scrollHeight, document.documentElement.scrollHeight,
+            document.body.offsetHeight, document.documentElement.offsetHeight,
+            document.body.clientHeight, document.documentElement.clientHeight
+        );
+        const atTop = scrollTop <= 10;
+        const atBottom = scrollTop + windowHeight >= docHeight - 10;
+
+        // Toggle icon and label
+        if (atBottom) {
+            btn.textContent = '↑';
+            btn.setAttribute('aria-label', 'Scroll to top');
+            btn.setAttribute('title', 'Scroll to top');
+        } else {
+            btn.textContent = '↓';
+            btn.setAttribute('aria-label', 'Scroll to bottom');
+            btn.setAttribute('title', 'Scroll to bottom');
+        }
+
+        // Show the button only when scrollable content exists
+        const scrollable = docHeight > windowHeight + 20;
+        if (!scrollable) {
+            btn.classList.add('hidden');
+        } else {
+            btn.classList.remove('hidden');
+        }
+    };
+
+    const handleClick = () => {
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+        const docHeight = Math.max(
+            document.body.scrollHeight, document.documentElement.scrollHeight,
+            document.body.offsetHeight, document.documentElement.offsetHeight,
+            document.body.clientHeight, document.documentElement.clientHeight
+        );
+        const atBottom = scrollTop + windowHeight >= docHeight - 10;
+        if (atBottom) {
+            scrollToTop();
+        } else {
+            scrollToBottom();
+        }
+    };
+
+    btn.addEventListener('click', handleClick);
+    window.addEventListener('scroll', updateButtonState, { passive: true });
+    window.addEventListener('resize', updateButtonState);
+    document.addEventListener('DOMContentLoaded', updateButtonState);
+
+    // Also update after data tables render to ensure correct visibility
+    const originalUpdateTable = window.updateTable;
+    if (typeof originalUpdateTable === 'function') {
+        window.updateTable = function() {
+            originalUpdateTable.apply(this, arguments);
+            setTimeout(updateButtonState, 0);
+        };
+    }
+
+    // Initial state
+    setTimeout(updateButtonState, 0);
+})();

style.css

@@ -252,3 +252,31 @@ body {
     background-color: yellow;
     color: black; /* High contrast for visibility */
 }
+
+/* Floating Scroll Toggle Button */
+#scrollToggleBtn {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: #007bff;
+    color: #fff;
+    border: none;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+    font-size: 22px;
+    line-height: 44px;
+    text-align: center;
+    cursor: pointer;
+    z-index: 1000;
+    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
+}
+#scrollToggleBtn:hover {
+    background: #0056b3;
+    transform: translateY(-2px);
+}
+#scrollToggleBtn.hidden {
+    opacity: 0;
+    pointer-events: none;
+}