+
diff --git a/frontend/src/styles/core.scss b/frontend/src/styles/core.scss
index 4a34b6271..73d81b9fd 100644
--- a/frontend/src/styles/core.scss
+++ b/frontend/src/styles/core.scss
@@ -256,37 +256,6 @@ key {
visibility: hidden !important;
}
-.scrollToTopContainer {
- position: fixed;
- width: 100%;
- height: 100%;
- pointer-events: none;
- z-index: 99999999;
-
- .scrollToTopButton {
- pointer-events: all;
- place-self: end end;
- margin-bottom: 2rem;
- font-size: 2rem;
- width: 4rem;
- height: 4rem;
- text-align: center;
-
- line-height: 4rem;
- background: var(--sub-alt-color);
- border-radius: 99rem;
- outline: 0.5rem solid var(--bg-color);
-
- cursor: pointer;
- color: var(--sub-color);
- transition: 0.25s;
- &:hover {
- background: var(--text-color);
- color: var(--bg-color);
- }
- }
-}
-
.inputAndIndicator {
input {
width: 100%;
diff --git a/frontend/src/ts/components/ScrollToTop.module.scss b/frontend/src/ts/components/ScrollToTop.module.scss
new file mode 100644
index 000000000..c7aa13198
--- /dev/null
+++ b/frontend/src/ts/components/ScrollToTop.module.scss
@@ -0,0 +1,32 @@
+.container {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 99999999;
+ top: 0;
+ left: 0;
+
+ .button {
+ pointer-events: all;
+ place-self: end end;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ width: 4rem;
+ height: 4rem;
+ text-align: center;
+
+ line-height: 4rem;
+ background: var(--sub-alt-color);
+ border-radius: 99rem;
+ outline: 0.5rem solid var(--bg-color);
+
+ cursor: pointer;
+ color: var(--sub-color);
+ transition: 0.25s;
+ &:hover {
+ background: var(--text-color);
+ color: var(--bg-color);
+ }
+ }
+}
diff --git a/frontend/src/ts/components/ScrollToTop.tsx b/frontend/src/ts/components/ScrollToTop.tsx
new file mode 100644
index 000000000..24b10f607
--- /dev/null
+++ b/frontend/src/ts/components/ScrollToTop.tsx
@@ -0,0 +1,46 @@
+import { JSXElement, createSignal, onMount, onCleanup } from "solid-js";
+import * as ActivePage from "../states/active-page";
+import styles from "./ScrollToTop.module.scss";
+
+export function hideScrollToTop(): void {
+ // setVisible(false);
+}
+
+export function ScrollToTop(): JSXElement {
+ const [visible, setVisible] = createSignal(false);
+ const handleScroll = () => {
+ const page = ActivePage.get();
+ if (page === "test") return;
+
+ const scroll = window.scrollY;
+ setVisible(scroll > 100);
+ };
+
+ onMount(() => {
+ window.addEventListener("scroll", handleScroll, { passive: true });
+ });
+
+ onCleanup(() => {
+ window.removeEventListener("scroll", handleScroll);
+ });
+
+ return (
+
+
{
+ setVisible(false);
+ window.scrollTo({
+ top: 0,
+ behavior: "instant",
+ });
+ }}
+ >
+
+
+
+ );
+}
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 851da56c9..3b57bda96 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -2,9 +2,11 @@ import { render } from "solid-js/web";
import { isDevEnvironment } from "../utils/misc";
import { SolidTest } from "../components/SolidTest";
import { qsr } from "../utils/dom";
+import { ScrollToTop } from "./ScrollToTop";
export function mountComponents(): void {
if (isDevEnvironment()) {
render(() =>
, qsr("#solidTest").native);
}
+ render(ScrollToTop, qsr("body").native);
}
diff --git a/frontend/src/ts/elements/scroll-to-top.ts b/frontend/src/ts/elements/scroll-to-top.ts
deleted file mode 100644
index 2ebd2d48e..000000000
--- a/frontend/src/ts/elements/scroll-to-top.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as ActivePage from "../states/active-page";
-import { prefersReducedMotion } from "../utils/misc";
-import { qsr } from "../utils/dom";
-
-let visible = false;
-
-const button = qsr(".scrollToTopButton");
-
-export function hide(): void {
- button.addClass("invisible");
- visible = false;
-}
-
-function show(): void {
- button.removeClass("invisible");
- visible = true;
-}
-
-button.on("click", () => {
- button.addClass("invisible");
- window.scrollTo({
- top: 0,
- behavior: prefersReducedMotion() ? "instant" : "smooth",
- });
-});
-
-window.addEventListener("scroll", () => {
- const page = ActivePage.get();
- if (page === "test") return;
-
- const scroll = window.scrollY;
- if (!visible && scroll > 100) {
- show();
- } else if (visible && scroll < 100) {
- hide();
- }
-});
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index 0ad2ffc0a..e4c7eb954 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -30,7 +30,6 @@ import "./input/listeners";
import "./ready";
import "./controllers/route-controller";
import "./pages/about";
-import "./elements/scroll-to-top";
import * as Account from "./pages/account";
import "./elements/no-css";
import { egVideoListener } from "./popups/video-ad-popup";
diff --git a/frontend/src/ts/pages/test.ts b/frontend/src/ts/pages/test.ts
index 0791fdd53..eefd32e9b 100644
--- a/frontend/src/ts/pages/test.ts
+++ b/frontend/src/ts/pages/test.ts
@@ -7,9 +7,9 @@ import { updateFooterAndVerticalAds } from "../controllers/ad-controller";
import * as ModesNotice from "../elements/modes-notice";
import * as Keymap from "../elements/keymap";
import * as TestConfig from "../test/test-config";
-import * as ScrollToTop from "../elements/scroll-to-top";
import { blurInputElement } from "../input/input-element";
import { qsr } from "../utils/dom";
+import { hideScrollToTop } from "../components/ScrollToTop";
export const page = new Page({
id: "test",
@@ -36,6 +36,6 @@ export const page = new Page({
});
void TestConfig.instantUpdate();
void Keymap.refresh();
- ScrollToTop.hide();
+ hideScrollToTop();
},
});