Angular: 特定の 要素までスクロールさせる

いくつか方法があります。

viewportScroller.scrollToAnchor

特定のIDを持つ要素までスクロールします。

コンポーネントでは次のように記述します。

/* 省略 ... */

    constructor(private viewportScroller: ViewportScroller) {
    }

    sampleMethod() {
        this.viewportScroller.scrollToAnchor('specific_id')
    }

/* 省略 ... */

<div id="specific_id"></div>

ViewChild

scrollToAnchor は即座にスクロールしてくれるのですが、 ユーザからすると一瞬で画面が変わることになり、なにが起きたのか理解できなくなることがあります。

スムーズにスクロールする方法のひとつに、 ViewChild を使う方法があります。
ViewChild を使ってHTMLの要素をコードから使えるようにしておきます。
スクロールは HTML の要素が持つメソッドを使って行います。

/* 省略 ... */

    @ViewChild('specific') specificElement: ElementRef | undefined

    sampleMethod() {
      this.specificElement?.nativeElement.scrollIntoView({
        behavior: "smooth", block: "start", inline: "nearest"
      })
    }

/* 省略 ... */

<div #specific></div>

たとえば次のように、条件変更と同時に要素が出現する場合には、 setTimeout を使うとうまくスクロールできます。

/* 省略 ... */

    sampleMethod() {
      this.flag = true
      setTimeout(
        () => {
          this.specificElement?.nativeElement.scrollIntoView({
            behavior: "smooth", block: "start", inline: "nearest"
          })
        },
        100
      )
    }

/* 省略 ... */

<div *ngIf="flag">
    <div #specific></div>
</div>