Estoy creando una página web que tiene divisiones de ancho / alto de página completa. Mientras me desplazo hacia abajo, tengo dos tipos de métodos.

Desplazarse al hacer clic

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

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

Desplazarse en HostListener

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

1. ¿Cómo agregar efectos de animación de desplazamiento?

Al igual que :

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

2. ¿Y cómo usar HostListener para desplazarse al siguiente div?