to the top button

src/app/app.component.html

@@ -1,4 +1,4 @@
-<rb-full-header>
+<rb-full-header id="top">
   <nav *rbMainNavItems>
     <a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</a>
     <a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="login.isLoggedIn">Samples</a>
@@ -45,6 +45,12 @@
   </div>
 </rb-full-header>
 
-<div class="container">
-  <router-outlet></router-outlet>
+<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>

src/app/app.component.scss

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

src/app/app.component.ts

@@ -59,6 +59,10 @@ URL: ${window.location}%0D%0A%0D%0AWhat did you do?%0D%0A${encodeURIComponent(th
   closeBugReport(close) {
     setTimeout(() => close(), 1);
   }
+
+  toTheTop() {
+    window.scroll(0, 0);
+  }
 }
 
 

src/app/samples/samples.component.scss

@@ -52,6 +52,7 @@ rb-table {
 }
 
 .paging {
+  height: 50px;
   rb-form-input {
     max-width: 50px;
   }

src/styles.scss

@@ -13,6 +13,10 @@ $rb-extended-breakpoints: false;  // whether to use extended breakpoints xxl and
   box-sizing: border-box;
 }
 
+body {
+  scroll-behavior: smooth;
+}
+
 a, a:active, a:focus {
   outline: 0 !important;
 }