hiding scroll to top button when at the top

gulpfile.js

@@ -133,6 +133,7 @@ const refactoredSrc = [
   "./src/js/elements/new-version-notification.js",
   "./src/js/elements/mobile-test-config.js",
   "./src/js/elements/loading-page.js",
+  "./src/js/elements/scroll-to-top.js",
 
   "./src/js/popups/custom-text-popup.js",
   "./src/js/popups/pb-tables-popup.js",

src/js/elements/scroll-to-top.js

@@ -0,0 +1,22 @@
+import * as UI from "./ui";
+
+let visible = false;
+
+$(".scrollToTopButton").click((event) => {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+});
+
+$(window).scroll((e) => {
+  let page = UI.getActivePage();
+  if (page == "pageTest") return;
+  if (page == "pageAbout" || page == "pageSettings" || page == "pageAccount") {
+    let scroll = window.scrollY;
+    if (!visible && scroll > 100) {
+      $(".scrollToTopButton").removeClass("invisible");
+      visible = true;
+    } else if (visible && scroll < 100) {
+      $(".scrollToTopButton").addClass("invisible");
+      visible = false;
+    }
+  }
+});

src/js/global-dependencies.js

@@ -22,6 +22,7 @@ import "./input-controller";
 import "./ready";
 import "./about-page";
 import "./pb-tables-popup";
+import "./scroll-to-top";
 import * as Account from "./account";
 import * as TestStats from "./test-stats";
 import * as Replay from "./replay";

src/js/ui.js

@@ -269,10 +269,6 @@ $(".merchBanner .fas").click((event) => {
   // );
 });
 
-$(".scrollToTopButton").click((event) => {
-  window.scrollTo({ top: 0, behavior: "smooth" });
-});
-
 $(document).on("click", "#bottom .leftright .right .current-theme", (e) => {
   if (e.shiftKey) {
     UpdateConfig.toggleCustomTheme();

static/index.html

@@ -1537,7 +1537,7 @@
             </div>
           </div>
           <div class="page pageAbout hidden">
-            <div class="scrollToTopButton">
+            <div class="scrollToTopButton invisible">
               <i class="fas fa-angle-double-up"></i>
             </div>
             <div class="created">