Add Scroll to top button

src/app/dars/audit/audit.component.html

@@ -284,4 +284,11 @@
 
     </mat-accordion>
   </section>
-</mat-card>
+  <button (click)="scrollTop();"
+        class="audit-scrolltop"
+        [hidden]="!scrolling"
+        matTooltip="Scroll to top"
+        matTooltipPosition="above">
+        <i class="material-icons">arrow_upward</i>
+      </button>
+</mat-card>
\ No newline at end of file

src/app/dars/audit/audit.component.ts

@@ -14,6 +14,7 @@ import {
 import { MatAccordion } from '@angular/material';
 import { AuditUnits } from '../models/audit/top-section';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { HostListener } from '@angular/core';
 
 @Component({
   selector: 'cse-dars-audit',
@@ -24,7 +25,6 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
 export class DarsAuditComponent implements OnInit {
   @Input() audit: Audit;
   @ViewChild(MatAccordion) requirements: MatAccordion;
-
   public metadata: any = {};
   public auditId: number;
   public courseTerms: string[] = [
@@ -37,30 +37,37 @@ export class DarsAuditComponent implements OnInit {
   ];
 
   public highSchoolUnitsSection = ['LANG', 'MATH', 'SCIENCE', 'SOC STUD'];
-
+  public scrolling = false;
   public advancedStandingCredits = [
     'dateValue',
     'typeValue',
     'degreeCreditsValue',
     'courseCreditsValue',
   ];
-
-  constructor(private announcer: LiveAnnouncer) { }
+  constructor(private announcer: LiveAnnouncer) {}
   public announce(btn) {
     btn === 'expand'
       ? this.announcer.announce(
-        'Expanded All Requirements Sections',
-        'assertive',
-      )
+          'Expanded All Requirements Sections',
+          'assertive',
+        )
       : this.announcer.announce(
-        'Collapsed All Requirements Sections',
-        'assertive',
-      );
+          'Collapsed All Requirements Sections',
+          'assertive',
+        );
+  }
+
+  // Checking for window scroll events
+  @HostListener('window:scroll', ['$event'])
+  onScroll() {
+    window.pageYOffset > 400
+      ? (this.scrolling = true)
+      : (this.scrolling = false);
   }
 
   public ngOnInit() {
     // Filter out LEGEND from audit data
-    this.audit.requirements = this.audit.requirements.filter(function (
+    this.audit.requirements = this.audit.requirements.filter(function(
       requirement,
     ) {
       return requirement.requirementName !== 'LEGEND';
@@ -68,6 +75,13 @@ export class DarsAuditComponent implements OnInit {
     console.log(this.audit);
   }
 
+  public scrollTop() {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }
+
   public openAllRequirements() {
     this.requirements.openAll();
   }

src/app/dars/metadata-mobile-view/metadata-mobile-view.component.html

@@ -38,6 +38,13 @@
           </button>
         </div>
       </mat-card-footer>
+      <button (click)="scrollTop();"
+        class="audit-scrolltop"
+        [hidden]="!scrolling"
+        matTooltip="Scroll to top"
+        matTooltipPosition="above">
+        <i class="material-icons">arrow_upward</i>
+      </button>
     </mat-card>
   </div>
 </div>

src/app/dars/metadata-mobile-view/metadata-mobile-view.component.ts

 import { Component, Input } from '@angular/core';
 import { AuditMetadata } from '../models/audit-metadata';
+import { HostListener } from '@angular/core';
 
 @Component({
   selector: 'cse-metadata-mobile-view',
@@ -8,4 +9,19 @@ import { AuditMetadata } from '../models/audit-metadata';
 })
 export class MetadataMobileViewComponent {
   @Input() public metadata: AuditMetadata[];
+  public scrolling = false;
+
+  // Checking for window scroll events
+  @HostListener('window:scroll', ['$event'])
+  onScroll() {
+    window.pageYOffset > 400
+      ? (this.scrolling = true)
+      : (this.scrolling = false);
+  }
+  public scrollTop() {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }
 }

src/assets/sass/general.scss

@@ -381,6 +381,29 @@ main {
   font-size: 16px;
 }
 
+// Scroll to the top
+.audit-scrolltop {
+  background-color: #c5050c;
+  width: 55px;
+  height: 55px;
+  position: fixed;
+  right: 24px;
+  bottom: 30px;
+  color: #fff;
+  text-align: center;
+  font-weight: 800;
+  border-radius: 50%;
+  line-height: 6em;
+  border: none;
+  cursor: pointer;
+  z-index: 999;
+  transform: translate(0, 20px);
+  transition: all 0.5s;
+  &:hover {
+    background-color: #a70007;
+  }
+}
+
 // Media queries
 
 // To be removed after DARS banner goes away