Angular ページトップにスクロールするボタン

こんにちは。レモンティーです。

今回はページトップにスクロールするボタンです。

よく画面の右下とかに見かけるやつですね。

ググるとjQueryでの便利なやり方が沢山ヒットします。
Angularの場合はどうすればいいでしょうか。
今回は@ViewChildとscrollIntoViewメソッドを使います。

テンプレートで、スクロールの移動先にする要素に#pageTopとつけて
Template reference variableとして扱えるようにします。詳しくは↓
https://angular.jp/guide/template-syntax

ここではdivですが他でもOKです。

<div #pageTop>スクロール先</div>

あとは

@ViewChild("pageTop") pageTop: ElementRef;

のように宣言して、
別途作成したトップページに戻るボタンが押されたら

scrollToTop(){
  this.pageTop.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });
}

のようにscrollIntoViewを呼べばOKです。
developer.mozilla.org


今回はこれでおしまいです。
www.sawalemontea.com