Angular 4 - Scroll Animation

Question

I'm creating a webpage having full page width/height div's. While scrolling down I've two types of methods.

Scroll on Click

//HTML
<a (click)="goToDiv('about')"></a>

//JS
    goToDiv(id) {
        let element = document.querySelector("#"+id);
        element.scrollIntoView(element);
      }

Scroll on HostListener

  @HostListener("window:scroll", ['$event'])
  onWindowScroll($event: any): void {
    this.topOffSet = window.pageYOffset;
    //window.scrollTo(0, this.topOffSet+662);
  }

1. How to add a scrolling animation effects?

Just like :

$('.scroll').on('click', function(e) {
    $('html, body').animate({
        scrollTop: $(window).height()
    }, 1200);
});

2. And how to use HostListener to scroll to next div?

Answer 1

You can also use the CSS property scroll-behavior: smooth

in combination with

var yPosition = 1000;
window.scrollTo(0,yPosition)

Ref: developer.mozilla.org/docs/Web/CSS/scroll-behavior