title: Angular 4 - Scroll Animation
body: <p>I'm creating a webpage having full page width/height div's.
  While scrolling down I've two types of methods.</p>
  
  <p><strong>Scroll on Click</strong></p>
  
  <pre><code>//HTML
  &lt;a (click)="goToDiv('about')"&gt;&lt;/a&gt;
  
  //JS
      goToDiv(id) {
          let element = document.querySelector("#"+id);
          element.scrollIntoView(element);
        }
  </code></pre>
  
  <p><strong>Scroll on HostListener</strong></p>
  
  <pre><code>  @HostListener("window:scroll", ['$event'])
    onWindowScroll($event: any): void {
      this.topOffSet = window.pageYOffset;
      //window.scrollTo(0, this.topOffSet+662);
    }
  </code></pre>
  
  <p><strong>1. How to add a scrolling animation effects?</strong></p>
  
  <p>Just like :</p>
  
  <pre><code>$('.scroll').on('click', function(e) {
      $('html, body').animate({
          scrollTop: $(window).height()
      }, 1200);
  });
  </code></pre>
  
  <p><strong>2. And how to use HostListener to scroll to next div?</strong></p>