Corredor

ウェブ、プログラミングの勉強メモ。

Angular 4+ で画面遷移時にスクロール位置を最上部に戻すには

Angular 4 以降で、コンポーネントの遷移時にスクロール位置が最上部に戻ってくれない。

以下のように、AppComponent にて Router のイベントを見て、移動が終わった時 = NavigationEndwindow.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);
      }
    });
  }
}

コレだけ。

Angular Webアプリ開発 スタートブック

Angular Webアプリ開発 スタートブック