Автоматическая прокрутка в Angular 2+ с использованием директивы

это поможет вашему вебу стать более динамичным

import {
  Directive,
  OnInit,
  ElementRef,
  OnDestroy,
  AfterViewInit,
  OnChanges,
  Input
} from '@angular/core';
import { Subject } from 'rxjs';
import { distinct, filter, delay, first } from 'rxjs/operators';
@Directive({
  selector: '[appScrollToElement]'
})
export class ScrollDirective
  implements OnInit, OnDestroy, AfterViewInit, OnChanges {
  @Input()
  isScroll: boolean | undefined;
@Input()
  delayMS: number | undefined;
private doScrollStream = new Subject();
constructor(private el: ElementRef) {}
ngOnInit() {
    this.doScrollStream
      .pipe(
        distinct(),
        filter(Boolean),
        delay(this.delayMS || 0),
        first()
      )
      .subscribe(() => {
        this.directScroll();
      });
  }
ngOnDestroy() {}
ngAfterViewInit() {
    this.doScroll();
  }
ngOnChanges() {
    this.doScroll();
  }
// Be calling from  method of another component
  directScroll() {
    window.scroll({
      top: this.el.nativeElement.offsetTop,
      behavior: 'smooth'
    });
  }
  doScroll() {
    this.doScrollStream.next(this.isScroll);
  }
}

Как пользоваться :

<your-component *ngIf=”true” appScrollToElement
 [isScroll]=”true”></your-component>

Если вы хотите вручную прокрутить свои элементы после Init , просто используя

@ViewChildren(ScrollDirective)
 targets!: QueryList<ScrollDirective>;

и вызовите directScroll()

this.targets.first.directScroll();