feat: add back to top

phodal · Mar 18, 2020 · 2cc4376 · 2cc4376
1 parent b335424
commit 2cc4376
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/src/app/shared/components/markdown-render/markdown-render.component.html b/src/app/shared/components/markdown-render/markdown-render.component.html
@@ -18,3 +18,10 @@
  ></markdown>
  <mat-spinner *ngIf="loading" class="loading" color="accent"></mat-spinner>
 </div>
+
+<!--Scroll to top-->
+<div class="scroll-to-top" [ngClass]="{'show-scrollTop': windowScrolled}">
+ <button mat-fab aria-label="home" (click)="scrollToTop()">
+ <mat-icon>arrow_upward</mat-icon>
+ </button>
+</div>
diff --git a/src/app/shared/components/markdown-render/markdown-render.component.scss b/src/app/shared/components/markdown-render/markdown-render.component.scss
@@ -29,3 +29,17 @@
  overflow: hidden;
  z-index: 10;
 }
+
+.scroll-to-top {
+ position: fixed;
+ bottom: 15px;
+ right: 15px;
+ opacity: 0;
+ transition: all .2s ease-in-out;
+}
+
+.show-scrollTop {
+ opacity: 1;
+ z-index: 999;
+ transition: all .2s ease-in-out;
+}
diff --git a/src/app/shared/components/markdown-render/markdown-render.component.ts b/src/app/shared/components/markdown-render/markdown-render.component.ts
@@ -57,6 +57,7 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  private tocPosition = 0;
  tocStr = '';
  sticky = false;
+ private windowScrolled = false;
 
  constructor(private markdownService: MarkdownService, private tocify: Tocify, private location: Location) {
  }
@@ -74,6 +75,23 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  } else {
  this.sticky = false;
  }
+
+ if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
+ this.windowScrolled = true;
+ }
+ else if (this.windowScrolled && window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop < 10) {
+ this.windowScrolled = false;
+ }
+ }
+
+ scrollToTop() {
+ (function smoothscroll() {
+ const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
+ if (currentScroll > 0) {
+ window.requestAnimationFrame(smoothscroll);
+ window.scrollTo(0, currentScroll - (currentScroll / 8));
+ }
+ })();
  }
 
  ngOnInit(): void {
@@ -173,7 +191,7 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  }
 
  private buildClassCode(code: any) {
-  return `<div class="${code}"></div>`;
+ return `<div class="${code}"></div>`;
  }
 
  private buildNormalCode(options: any, code: any, lang: string, escaped: any) {
@@ -454,7 +472,7 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  }
 
  cols += `<div class="process-step-column">
- <div class="process-title">${title}</div><div class="process-body ${maxWidthClass === '' ? '' : 'process-long-body' }">${itemsStr}</div>
+ <div class="process-title">${title}</div><div class="process-body ${maxWidthClass === '' ? '' : 'process-long-body'}">${itemsStr}</div>
 </div>`;
  }
 

diff --git a/src/app/shared/custom-material.module.ts b/src/app/shared/custom-material.module.ts
@@ -5,14 +5,16 @@ import { MatMenuModule } from '@angular/material/menu';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSliderModule} from '@angular/material/slider';
 import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatIconModule} from '@angular/material/icon';
 
 const modules = [
  MatToolbarModule,
  MatButtonModule,
  MatMenuModule,
  MatProgressSpinnerModule,
  MatSliderModule,
- MatSidenavModule
+ MatSidenavModule,
+ MatIconModule
 ];
 
 @NgModule({