title: How to smooth scroll up on page - Angular 7
body: <p>It's supposed to be simple, but since yesterday i'm trying to smooth scroll up on the page. 
  The scroll function works, but not the smooth scrolling. </p>
  
  <p>I tryed : <code>scrollIntoView({behavior: 'smooth'})</code> , but it doesn't work.</p>
  
  <p>This is my html component</p>
  
  <pre><code>        &lt;div *ngIf="displayNoneOnBtn" [hidden]="!displayNoneOnBtn"  id="btnTest" class="shadow d-flex flex-column align-items-center justify-content-center"&gt;
              &lt;ng-container *ngIf="!disableBtn"&gt;
                  &lt;i class="material-icons arrow-up-button" (click)="scrollTopWindow()"&gt;keyboard_arrow_up&lt;/i&gt;
              &lt;/ng-container&gt;
              &lt;ng-container *ngIf="disableBtn"&gt;
                  &lt;i class="material-icons arrow-down-button" (click)="scrollDown()"&gt;keyboard_arrow_down&lt;/i&gt;
              &lt;/ng-container&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And my TS component</p>
  
  <pre><code>    import {Component, OnInit, ElementRef} from '@angular/core';
  import 'hammerjs';
  import { SessionService, UiService } from 'src/app/core/services';
  
  @Component({
      templateUrl: './frontend.component.html',
      styleUrls: ['./frontend.component.scss'],
  })
  
  export class FrontendComponent implements OnInit {
      top: number;
      disableBtn = true;
      scrollHeight: number;
      displayNoneOnBtn = true;
  
      constructor(
          public sessionService: SessionService,
          public uiService: UiService,
          private el: ElementRef,
      ) {
      }
  
      scrollClass: any;
  
      ngOnInit(): void {
          this.scrollClass = Array.prototype.slice.call(this.el.nativeElement.getElementsByClassName('pageScroll'), 0)[0];
          console.log('scroll scrollTop', this.scrollClass.scrollTop);
          console.log('scroll scrollHeight', this.scrollClass.scrollHeight);
          console.log('scroll offsetHeight', this.scrollClass.offsetHeight);
      }
  
      asideNavToogle(status: string) {
          this.uiService.stateAsideNav = status;
      }
  
      scrollDown() {
          this.scrollClass.scrollTop = this.scrollClass.scrollHeight;
      }
  
      scrollTopWindow() {
          this.scrollClass.scrollTop = 0;
          this.el.nativeElement.scrollIntoView({behavior: 'smooth'});
      }
  
      onScroll (event: Event) {
          console.log('scroll scrollTop', this.scrollClass.scrollTop);
          console.log('scroll scrollHeight', this.scrollClass.scrollHeight);
          console.log('scroll offsetHeight', this.scrollClass.offsetHeight);
          if (this.scrollClass.scrollTop === 0) {
              this.disableBtn = true;
          }
          if (this.scrollClass.scrollHeight === this.scrollClass.scrollTop + this.scrollClass.offsetHeight) {
              this.disableBtn = false;
          }
          if (this.scrollClass.scrollHeight === this.scrollClass.offsetHeight) {
              this.displayNoneOnBtn = false ;
          }
  
      }
  
  }
  
  </code></pre>