Scroll to top button (#4569)

* init

* implement review suggestions

* remove unnecessary css variables

* respect reduced motion

* simplify setupScrollToTop call

* power_user flag fix

* simplify, more of above

* remove remove button when drawer is closed logic

* throttle scroll checker

* Fix review comments

* Make scrollToTop a shared function

* Refactor logic

* Replace on hover color

* Prefer theme colors for button

* Increase hover brightness for scroll-to-top button

* Clean-up diff

* Fix type annotation

---------

Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

public/css/backgrounds.css

@@ -88,6 +88,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     padding: 0 5px 15px;
+    position: relative;
 }
 
 #bg_menu_content,
@@ -219,6 +220,44 @@
     background-color: rgba(255, 255, 255, 0.2);
 }
 
+/* Scroll-to-Top Button */
+#bg-scroll-top {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    width: 42px;
+    height: 42px;
+    background: var(--SmartThemeBlurTintColor);
+    color: var(--SmartThemeBodyColor);
+    border: 1px solid var(--SmartThemeBorderColor);
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 10;
+    font-size: 18px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity var(--animation-duration) ease;
+    pointer-events: none;
+}
+
+#bg-scroll-top.visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+#bg-scroll-top:hover {
+    filter: brightness(150%);
+    outline: 1px solid var(--interactable-outline-color);
+}
+
+#bg-scroll-top .fa-solid {
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+}
+
 .thumbnail-clipper {
     position: absolute;
     top: -2px;