Merge pull request #964 from ember-learn/kg-add-scroll-to-top

Add a scroll-to-top button

Author: jaredgalanis

app/assets/styles.css

@@ -335,6 +335,48 @@ table td {
   .content {
     margin-top: var(--spacing-4);
   }
+
+  .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;
+  }
 }
 
 @media (width <= 450px) {

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

@@ -0,0 +1,33 @@
+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
+    type='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>