fixed to the top button

src/app/app.component.html

@@ -53,16 +53,13 @@
   </div>
 </rb-full-header>
 
-<div class="to-the-top-container">
-  <div class="container">
-    <router-outlet></router-outlet>
-  </div>
-
-  <div class="to-the-top">
-    <rb-icon-button icon="up" mode="primary" iconOnly (click)="toTheTop()"></rb-icon-button>
-  </div>
+<div class="container">
+  <router-outlet></router-outlet>
 </div>
 
+<rb-icon-button icon="up" mode="primary" iconOnly (click)="toTheTop()" *ngIf="window.scrollY > 300" class="to-the-top">
+</rb-icon-button>
+
 <rb-footer-nav>
   <span class="copyright">
     CR/APS1 and CR/ANA1 2020

src/app/app.component.scss

@@ -14,21 +14,13 @@
   width: 800px;
 }
 
-.to-the-top-container {
+.container {
   position: relative;
   overflow: hidden;
 }
 
 .to-the-top {
-  position: absolute;
-  top: 100vh;
-  bottom: 10px;
+  position: fixed;
   right: 1rem;
-  pointer-events: none;
-
-  rb-icon-button {
-    position: sticky;
-    pointer-events: all;
-    top: calc(100vh - 3rem);
-  }
+  bottom: 20px;
 }

src/app/app.component.ts

@@ -22,7 +22,7 @@ export class AppComponent implements OnInit{
   constructor(
     public login: LoginService,
     public router: Router,
-    private window: Window,
+    public window: Window,
     private modal: ModalService,
     public d: DataService
   ) {