Add scroll to top button

Author: Diya-od

frontend/leaderboard.html

@@ -11,6 +11,47 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="styles/main.css" />
+    <style>
+#scrollTopBtn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+
+  display: none;
+  z-index: 999;
+
+  padding: 0.7rem 1rem;
+
+  font-family: "Fira Code", monospace;
+  font-size: 0.8rem;
+  font-weight: 600;
+
+  color: var(--green);
+  background: rgba(0, 0, 0, 0.85);
+
+  border: 1px solid var(--green);
+  border-radius: 6px;
+
+  cursor: pointer;
+
+  text-shadow: 0 0 5px rgba(0, 255, 100, 0.5);
+  box-shadow: 0 0 10px rgba(0, 255, 100, 0.15);
+
+  transition: all 0.25s ease;
+}
+
+#scrollTopBtn:hover {
+  transform: translateY(-3px);
+  background: rgba(0, 255, 100, 0.08);
+  box-shadow:
+    0 0 12px rgba(0, 255, 100, 0.35),
+    0 0 20px rgba(0, 255, 100, 0.15);
+}
+
+#scrollTopBtn:active {
+  transform: translateY(0);
+}
+</style>
     <link rel="icon" type="image/png" href="assets/logo.png" />
     <script src="js/navbar.js"></script>
   </head>
@@ -81,7 +122,7 @@ <h1 class="page-title">Leaderboard</h1>
               autocomplete="off"
               spellcheck="false"
             />
-            
+
             <span class="search-result-count" id="search-result-count"></span>
             <kbd class="search-shortcut" id="search-shortcut">Ctrl+K</kbd>
             <button
@@ -145,6 +186,10 @@ <h1 class="page-title">Leaderboard</h1>
       </div>
     </main>
 
+    <button id="scrollTopBtn" aria-label="Scroll to top">
+        [ ↑ TOP ]
+      </button>
+
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         document.querySelectorAll(".tab").forEach((tab) => {
@@ -220,6 +265,24 @@ <h1 class="page-title">Leaderboard</h1>
             }
           });
           clearBtn.style.display = "none";
+
+          const scrollTopBtn = document.getElementById("scrollTopBtn");
+
+window.addEventListener("scroll", () => {
+  if (window.scrollY > 300) {
+    scrollTopBtn.style.display = "block";
+  } else {
+    scrollTopBtn.style.display = "none";
+  }
+});
+
+scrollTopBtn.addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+});
+
         fetchLeaderboardData();
       });