Angular 4+ で画面遷移時にスクロール位置を最上部に戻すには
Angular 4 以降で、コンポーネントの遷移時にスクロール位置が最上部に戻ってくれない。
以下のように、AppComponent にて Router のイベントを見て、移動が終わった時 = NavigationEnd
に window.scrollTo()
を実行してやれば良い。
import { Component, Inject, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
/**
* コンストラクタ
*
* @param router ページ遷移のイベントを取得するために使用する
*/
constructor(protected router: Router) { }
/**
* 初期化処理 : ページ遷移をした時にスクロール位置をページ上部に戻す
*/
ngOnInit(): void {
this.router.events.subscribe((event) => {
if(event instanceof NavigationEnd) {
window.scrollTo(0, 0);
}
});
}
}
コレだけ。