Add a scroll to top button.

I got tired of scrolling.

Author: kategengler

app/assets/styles.css

@@ -262,6 +262,46 @@ section.event {
   border: 0;
 }
 
+.scroll-to-top {
+  position: fixed;
+  bottom: 50px;
+  right: 30px;
+  z-index: 10;
+  display: block;
+  background: var(--color-gray-500);
+  border-width: 0;
+  height: 50px;
+  width: 50px;
+  border-radius: 50%;
+  transition: all 0.2s linear, opacity 0.3s;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.scroll-to-top.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.scroll-to-top:hover {
+  transform: scale(1.1);
+}
+
+.scroll-to-top::after {
+  content: "";
+  position: absolute;
+  left: 16px;
+  z-index: 11;
+  display: block;
+  width: 15px;
+  height: 15px;
+  border-top: 4px solid var(--color-gray-100);
+  border-left: 4px solid var(--color-gray-100);
+  transform: rotate(45deg);
+  top: 20px;
+}
+
 /* Ember data uses styled elements in markdown blocks that conflict with the
    default styles for blockquotes (because of ::before block that has an
    absolutely positioned quote mark).

app/components/scroll-to-top-button.gjs

@@ -0,0 +1,32 @@
+import { modifier } from 'ember-modifier';
+import { on } from '@ember/modifier';
+
+const showOnScroll = modifier(function showOnScroll(element) {
+  function toggleVisibility() {
+    if (window.scrollY > window.innerHeight) {
+      element.classList.add('is-visible');
+    } else {
+      element.classList.remove('is-visible');
+    }
+  }
+
+  toggleVisibility();
+  window.addEventListener('scroll', toggleVisibility);
+
+  return () => {
+    window.removeEventListener('scroll', toggleVisibility);
+  };
+});
+
+function scrollToTopOfPageOnClick() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+<template>
+  <button
+    {{showOnScroll}}
+    {{on 'click' scrollToTopOfPageOnClick}}
+    class='scroll-to-top'
+    alt='Scroll to top'
+  ></button>
+</template>

app/controllers/project-version.js

@@ -19,6 +19,9 @@ export default class ProjectVersionController extends Controller {
   @service
   project;
 
+  @service
+  fastboot;
+
   @service router;
   @service('project') projectService;
 

app/templates/project-version.hbs

@@ -31,5 +31,9 @@
   </EsSidebar>
   <section class="content-wrapper">
     {{outlet}}
+    
+    {{#unless this.fastboot.isFastBoot}}
+      <ScrollToTopButton />
+    {{/unless}}
   </section>
 </div>