Add "go up" arrow

src/page/up-arrow-button/up-arrow-button.html.ts

@@ -0,0 +1,9 @@
+import arrow from '../../../static/icons/arrow.svg';
+import { html } from '../../types/html';
+import './up-arrow-button.scss';
+
+export const generate = (label: string): html => `
+  <button id="up-arrow-button" aria-label="${label}">
+    ${arrow}
+  </button>
+`;

src/page/up-arrow-button/up-arrow-button.scss

@@ -0,0 +1,27 @@
+@use '../../style/mixins' as *;
+
+#up-arrow-button {
+  @include blurred-background();
+
+  cursor: pointer;
+  box-shadow: var(--shadow);
+  transition: opacity var(--transition-time), visibility var(--transition-time),
+    transform var(--transition-time);
+
+  border-radius: var(--border-radius);
+  background: none;
+  border: none;
+
+  position: fixed;
+  bottom: var(--small-margin);
+  right: var(--small-margin);
+  padding: 4px;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  svg {
+    @include square(var(--large-icon-size));
+  }
+}

src/page/up-arrow-button/up-arrow-button.ts

@@ -0,0 +1,42 @@
+import { PageElement } from '../page-element';
+import { generate } from './up-arrow-button.html';
+
+export class UpArrowButton extends PageElement {
+  private static readonly defaultTimeToLive = 2000;
+  private static readonly interval = 50;
+  private timeToLive = 0;
+
+  public constructor(private scrollTarget: PageElement, label: string) {
+    super(generate(label));
+
+    this.htmlRoot.addEventListener('click', this.scrollToTop.bind(this));
+
+    setInterval(() => {
+      this.timeToLive = Math.max(0, this.timeToLive - UpArrowButton.interval);
+      if (this.timeToLive == 0) {
+        this.htmlRoot.style.opacity = '0';
+        this.htmlRoot.style.visibility = 'hidden';
+      }
+    }, UpArrowButton.interval);
+  }
+
+  protected initialize() {
+    this.scrollTarget.htmlRoot.addEventListener('scroll', () => {
+      this.timeToLive = UpArrowButton.defaultTimeToLive;
+      this.htmlRoot.style.opacity = '1';
+      this.htmlRoot.style.visibility = 'visible';
+
+      if (this.scrollTarget.htmlRoot.scrollTop == 0) {
+        this.timeToLive = 0;
+      }
+    });
+  }
+
+  private scrollToTop(e: MouseEvent) {
+    if (this.timeToLive > 0) {
+      this.scrollTarget.htmlRoot.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+    } else {
+      e.preventDefault();
+    }
+  }
+}