Angular 2アプリで、ページを下にスクロールしてページの下部にあるリンクをクリックすると、ルートが変更されて次のページが表示されますが、ページの上部にスクロールしません。その結果、1ページ目が長く、2ページ目が少ない場合、2ページ目が不足しているような印象になります。コンテンツが表示されるのは、ユーザーがページの上部にスクロールした場合のみです。

コンポーネントのngInitでウィンドウをページの上部にスクロールできますが、アプリ内のすべてのルートを自動的に処理できるより良い解決策はありますか？

メインコンポーネントにルート変更リスナーを登録し、ルート変更を上にスクロールできます。

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {
    constructor(private router: Router) { }

    ngOnInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }
}

Angular 6.1以降：

Angular 6.1（2018-07-25にリリース）は、「ルーターのスクロール位置の復元」と呼ばれる機能を通じて、この問題を処理する組み込みサポートを追加しました。Angular公式ブログに記載ように、次のようにルーター構成でこれを有効にする必要があります。

RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})

さらに、ブログには「これは将来のメジャーリリースでデフォルトになることが予想されます」と述べています。これまでのところ（Angular 8.2の時点では）発生していませんが、最終的にはコードで何もする必要はなく、そのまま使用するだけで正しく動作します。

この機能の詳細と、この動作をカスタマイズする方法については、公式ドキュメントをご覧ください。。

Angular 6.0およびそれ以前：

@GuilhermeMeirelesの優れた答えは元の問題を修正しますが、（ブラウザーのボタンを使用するか、コードのLocationを介して）前後に移動するときに予想される通常の動作を壊すことにより、新しい問題を導入します。予想される動作は、ページに戻ったときに、リンクをクリックしたときと同じ場所まで下にスクロールしたままにする必要がありますが、すべてのページに到達したときに最上部にスクロールすると、この期待が明らかに損なわれます。

以下のコードは、LocationのPopStateEventシーケンスをサブスクライブし、新しく到達したページがそのようなイベントの結果である場合に上にスクロールするロジックをスキップすることにより、この種のナビゲーションを検出するロジックを拡張します。

戻る元のページがビューポート全体をカバーするのに十分な長さである場合、スクロール位置は自動的に復元されますが、@ JordanNelsonが正しく指摘したように、ページが短い場合は、元のyスクロール位置を追跡して復元する必要がありますページに戻るときに明示的に。更新されたバージョンのコードは、常に明示的にスクロール位置を復元することにより、このケースもカバーしています。

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { Location, PopStateEvent } from "@angular/common";

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {

    private lastPoppedUrl: string;
    private yScrollStack: number[] = [];

    constructor(private router: Router, private location: Location) { }

    ngOnInit() {
        this.location.subscribe((ev:PopStateEvent) => {
            this.lastPoppedUrl = ev.url;
        });
        this.router.events.subscribe((ev:any) => {
            if (ev instanceof NavigationStart) {
                if (ev.url != this.lastPoppedUrl)
                    this.yScrollStack.push(window.scrollY);
            } else if (ev instanceof NavigationEnd) {
                if (ev.url == this.lastPoppedUrl) {
                    this.lastPoppedUrl = undefined;
                    window.scrollTo(0, this.yScrollStack.pop());
                } else
                    window.scrollTo(0, 0);
            }
        });
    }
}

Angular 6.1から、面倒を回避し、2番目のパラメーターとしてに渡しextraOptionsて、RouterModule.forRoot()scrollPositionRestoration: enabledいつでもルート変更トップにスクロールする角度を伝えるために。

デフォルトでは、これはapp-routing.module.ts次の場所にあります。

const routes: Routes = [
  {
    path: '...'
    component: ...
  },
  ...
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled', // Add options right here
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Angular公式ドキュメント

観察可能なfilterメソッドを利用することで、これをより簡潔に書くことができます：

this.router.events.filter(event => event instanceof NavigationEnd).subscribe(() => {
      this.window.scrollTo(0, 0);
});

Angular Material 2 sidenavを使用しているときに上にスクロールするのに問題がある場合は、これが役立ちます。ウィンドウまたはドキュメントの本文にはスクロールバーがないため、sidenavコンテンツコンテナーを取得してその要素をスクロールする必要があります。それ以外の場合は、デフォルトでウィンドウをスクロールしてみてください。

this.router.events.filter(event => event instanceof NavigationEnd)
  .subscribe(() => {
      const contentContainer = document.querySelector('.mat-sidenav-content') || this.window;
      contentContainer.scrollTo(0, 0);
});

また、Angular CDK v6.xには、スクロールの処理に役立つ可能性のあるスクロールパッケージが含まれています。

サーバー側のレンダリングがある場合windows、その変数が存在しないサーバーでコードを実行しないように注意する必要があります。コードが破損する可能性があります。

export class AppComponent implements OnInit {
  routerSubscription: Subscription;

  constructor(private router: Router,
              @Inject(PLATFORM_ID) private platformId: any) {}

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.routerSubscription = this.router.events
        .filter(event => event instanceof NavigationEnd)
        .subscribe(event => {
          window.scrollTo(0, 0);
        });
    }
  }

  ngOnDestroy() {
    this.routerSubscription.unsubscribe();
  }
}

isPlatformBrowserアプリがレンダリングされる現在のプラットフォームがブラウザかどうかを確認するために使用される関数です。注射しplatformIdます。

次のように、variableの存在をチェックしてwindows安全であることも可能です。

if (typeof window != 'undefined')

クリック操作で簡単にできる

メインコンポーネントhtmlで参照を作成する#scrollContainer

<div class="main-container" #scrollContainer>
    <router-outlet (activate)="onActivate($event, scrollContainer)"></router-outlet>
</div>

主要コンポーネント.ts

onActivate(e, scrollContainer) {
    scrollContainer.scrollTop = 0;
}

Angularは最近、新機能を導入しました。AngleRoutingモジュールの内部では、以下のように変更します

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'top'
  })],

最良の答えは、Angular GitHubのディスカッションにあります（ルートを変更しても、新しいページの上部にスクロールされません）。

ルートルーターの変更でのみトップに移動したいかもしれません（子ではなく、タブセットで遅延ロードでルートをロードできるため）

app.component.html

<router-outlet (deactivate)="onDeactivate()"></router-outlet>

app.component.ts

onDeactivate() {
  document.body.scrollTop = 0;
  // Alternatively, you can scroll to top by using this other call:
  // window.scrollTo(0, 0)
}

JoniJnmへの完全なクレジット（元の投稿）

AfterViewInitライフサイクルフックをコンポーネントに追加できます。

ngAfterViewInit() {
   window.scrollTo(0, 0);
}

Angular 6.1以降、ルーターにはと呼ばれる設定オプションがありscrollPositionRestoration、これはこのシナリオに対応するように設計されています。

imports: [
  RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'
  }),
  ...
]

ページを上にスクロールするだけの場合は、これを行うことができます（最善の解決策ではありませんが、高速です）。

document.getElementById('elementId').scrollTop = 0;

これが私が思いついた解決策です。LocationStrategyとルーターイベントを組み合わせました。LocationStrategyを使用して、ユーザーが現在ブラウザーの履歴をトラバースしていることを認識するようにブール値を設定します。このようにして、一連のURLとyスクロールデータを保存する必要はありません（各データはURLに基​​づいて置き換えられるため、とにかくうまくいきません）。これにより、ユーザーがブラウザーの「戻る」ボタンまたは「進む」ボタンを押したまま1ページではなく複数のページに戻るまたは進む場合の問題も解決されます。

PS私は最新バージョンのIE、Chrome、FireFox、Safari、Opera（この投稿の時点）でのみテストしました。

お役に立てれば。

export class AppComponent implements OnInit {
  isPopState = false;

  constructor(private router: Router, private locStrat: LocationStrategy) { }

  ngOnInit(): void {
    this.locStrat.onPopState(() => {
      this.isPopState = true;
    });

    this.router.events.subscribe(event => {
      // Scroll to top if accessing a page, not via browser history stack
      if (event instanceof NavigationEnd && !this.isPopState) {
        window.scrollTo(0, 0);
        this.isPopState = false;
      }

      // Ensures that isPopState is reset
      if (event instanceof NavigationEnd) {
        this.isPopState = false;
      }
    });
  }
}

このソリューションは、@ FernandoEcheverriaと@GuilhermeMeirelesのソリューションに基づいていますが、より簡潔であり、Angular Routerが提供するpopstateメカニズムと連携します。これにより、複数の連続したナビゲーションのスクロールレベルを保存および復元できます。

各ナビゲーション状態のスクロール位置をマップに保存しますscrollLevels。popstateイベントが発生すると、復元しようとしている状態のIDがAngular Router：によって提供されますevent.restoredState.navigationId。これは、その状態の最後のスクロールレベルを取得するために使用されます。scrollLevels。

ルートに保存されているスクロールレベルがない場合は、期待どおりに最上部までスクロールします。

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
export class AppComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
    const scrollLevels: { [navigationId: number]: number } = {};
    let lastId = 0;
    let restoredId: number;

    this.router.events.subscribe((event: Event) => {

      if (event instanceof NavigationStart) {
        scrollLevels[lastId] = window.scrollY;
        lastId = event.id;
        restoredId = event.restoredState ? event.restoredState.navigationId : undefined;
      }

      if (event instanceof NavigationEnd) {
        if (restoredId) {
          // Optional: Wrap a timeout around the next line to wait for
          // the component to finish loading
          window.scrollTo(0, scrollLevels[restoredId] || 0);
        } else {
          window.scrollTo(0, 0);
        }
      }

    });
  }

}

以下に示すように@Guilherme Meirelesによって提供される完全な回答に加えて、以下に示すようにスムーズスクロールを追加することで実装を微調整できます

 import { Component, OnInit } from '@angular/core';
    import { Router, NavigationEnd } from '@angular/router';

    @Component({
        selector: 'my-app',
        template: '<ng-content></ng-content>',
    })
    export class MyAppComponent implements OnInit {
        constructor(private router: Router) { }

        ngOnInit() {
            this.router.events.subscribe((evt) => {
                if (!(evt instanceof NavigationEnd)) {
                    return;
                }
                window.scrollTo(0, 0)
            });
        }
    }

次に、以下のスニペットを追加します

 html {
      scroll-behavior: smooth;
    }

あなたのstyles.cssに

iphone / iosサファリの場合、setTimeoutでラップできます

setTimeout(function(){
    window.scrollTo(0, 1);
}, 0);

こんにちはみんなこれは角度4で私のために動作します。ルーターの変更をスクロールするには、親を参照する必要があります `

layout.component.pug

.wrapper(#outlet="")
    router-outlet((activate)='routerActivate($event,outlet)')

layout.component.ts

 public routerActivate(event,outlet){
    outlet.scrollTop = 0;
 }`

@Fernando Echeverria素晴らしい！しかし、このコードはハッシュルーターやレイジールーターでは機能しません。場所の変更はトリガーされないためです。これを試すことができます：

private lastRouteUrl: string[] = []
  

ngOnInit(): void {
  this.router.events.subscribe((ev) => {
    const len = this.lastRouteUrl.length
    if (ev instanceof NavigationEnd) {
      this.lastRouteUrl.push(ev.url)
      if (len > 1 && ev.url === this.lastRouteUrl[len - 2]) {
        return
      }
      window.scrollTo(0, 0)
    }
  })
}

Routerそれ自体を使用すると、一貫したブラウザエクスペリエンスを維持するために完全に克服できない問題が発生します。私の意見では、最良の方法は、カスタムdirectiveを使用して、クリック時にスクロールをリセットすることです。これの良いところは、urlクリックしにいる場合、ページも上にスクロールして戻ることです。これは通常のウェブサイトと一致しています。基本directiveは次のようになります。

import {Directive, HostListener} from '@angular/core';

@Directive({
    selector: '[linkToTop]'
})
export class LinkToTopDirective {

    @HostListener('click')
    onClick(): void {
        window.scrollTo(0, 0);
    }
}

次の使用法で：

<a routerLink="/" linkToTop></a>

ほとんどのユースケースではこれで十分ですが、これから発生する可能性のあるいくつかの問題を想像できます。

• 動作しません universalの使用のためにwindow
• クリックごとにトリガーされるため、変化の検出に対する速度への影響が小さい
• このディレクティブを無効にする方法はありません

これらの問題を克服することは実際には非常に簡単です：

@Directive({
  selector: '[linkToTop]'
})
export class LinkToTopDirective implements OnInit, OnDestroy {

  @Input()
  set linkToTop(active: string | boolean) {
    this.active = typeof active === 'string' ? active.length === 0 : active;
  }

  private active: boolean = true;

  private onClick: EventListener = (event: MouseEvent) => {
    if (this.active) {
      window.scrollTo(0, 0);
    }
  };

  constructor(@Inject(PLATFORM_ID) private readonly platformId: Object,
              private readonly elementRef: ElementRef,
              private readonly ngZone: NgZone
  ) {}

  ngOnDestroy(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.elementRef.nativeElement.removeEventListener('click', this.onClick, false);
    }
  }

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.ngZone.runOutsideAngular(() => 
        this.elementRef.nativeElement.addEventListener('click', this.onClick, false)
      );
    }
  }
}

これは、ほとんどのユースケースを考慮に入れ、基本的な使用方法と同じ使用法で、それを有効/無効にする利点があります。

<a routerLink="/" linkToTop></a> <!-- always active -->
<a routerLink="/" [linkToTop]="isActive"> <!-- active when `isActive` is true -->

コマーシャル、宣伝したくない場合は読んではいけません

ブラウザーがpassiveイベントをサポートしているかどうかを確認するために、別の改善を行うことができます。これはコードをもう少し複雑にし、これらすべてをカスタムディレクティブ/テンプレートに実装する場合は少しあいまいになります。そのため、これらの問題に対処するために使用できる小さなライブラリを作成しました。ライブラリpassiveを使用している場合は、上記と同じ機能を持ち、イベントが追加されているため、ディレクティブをこれに変更できますng-event-options。ロジックはclick.pnbリスナー内にあります：

@Directive({
    selector: '[linkToTop]'
})
export class LinkToTopDirective {

    @Input()
    set linkToTop(active: string|boolean) {
        this.active = typeof active === 'string' ? active.length === 0 : active;
    }

    private active: boolean = true;

    @HostListener('click.pnb')
    onClick(): void {
      if (this.active) {
        window.scrollTo(0, 0);
      }        
    }
}

これは、ハッシュナビゲーションを含むすべてのナビゲーションの変更に最適でした

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this._sub = this.route.fragment.subscribe((hash: string) => {
    if (hash) {
      const cmp = document.getElementById(hash);
      if (cmp) {
        cmp.scrollIntoView();
      }
    } else {
      window.scrollTo(0, 0);
    }
  });
}

このコードの背後にある主なアイデアは、訪問したすべてのURLをそれぞれのscrollYデータとともに配列に保持することです。ユーザーがページ（NavigationStart）を破棄するたびに、この配列は更新されます。ユーザーが新しいページ（NavigationEnd）を入力するたびに、Y位置を復元するか、このページに到達する方法に依存しないかを決定します。あるページの参照が使用された場合、0にスクロールします。ブラウザの戻る/転送機能が使用された場合、配列に保存されているYにスクロールします。私の英語でごめんなさい:)

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Location, PopStateEvent } from '@angular/common';
import { Router, Route, RouterLink, NavigationStart, NavigationEnd, 
    RouterEvent } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'my-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {

  private _subscription: Subscription;
  private _scrollHistory: { url: string, y: number }[] = [];
  private _useHistory = false;

  constructor(
    private _router: Router,
    private _location: Location) {
  }

  public ngOnInit() {

    this._subscription = this._router.events.subscribe((event: any) => 
    {
      if (event instanceof NavigationStart) {
        const currentUrl = (this._location.path() !== '') 
           this._location.path() : '/';
        const item = this._scrollHistory.find(x => x.url === currentUrl);
        if (item) {
          item.y = window.scrollY;
        } else {
          this._scrollHistory.push({ url: currentUrl, y: window.scrollY });
        }
        return;
      }
      if (event instanceof NavigationEnd) {
        if (this._useHistory) {
          this._useHistory = false;
          window.scrollTo(0, this._scrollHistory.find(x => x.url === 
          event.url).y);
        } else {
          window.scrollTo(0, 0);
        }
      }
    });

    this._subscription.add(this._location.subscribe((event: PopStateEvent) 
      => { this._useHistory = true;
    }));
  }

  public ngOnDestroy(): void {
    this._subscription.unsubscribe();
  }
}

window.scrollTo()私が使用しているので、角度5で私のために動作しませんdocument.body.scrollTopように、

this.router.events.subscribe((evt) => {
   if (evt instanceof NavigationEnd) {
      document.body.scrollTop = 0;
   }
});

同じルートで異なるコンポーネントをロードする場合は、ViewportScrollerを使用して同じことを実現できます。

import { ViewportScroller } from '@angular/common';

constructor(private viewportScroller: ViewportScroller) {}

this.viewportScroller.scrollToPosition([0, 0]);

window scroll top
window.pageYOffsetとdocument.documentElement.scrollTopは、どちらの場合も同じ結果を返します。window.pageYOffsetはIE 9以下ではサポートされていません。

app.component.ts

import { Component, HostListener, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isShow: boolean;
  topPosToStartShowing = 100;

  @HostListener('window:scroll')
  checkScroll() {

    const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

    console.log('[scroll]', scrollPosition);

    if (scrollPosition >= this.topPosToStartShowing) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
  }

  gotoTop() {
    window.scroll({ 
      top: 0, 
      left: 10, 
      behavior: 'smooth' 
    });
  }
}

app.component.html

<style>
  p {
  font-family: Lato;
}

button {
  position: fixed;
  bottom: 5px;
  right: 5px;
  font-size: 20px;
  text-align: center;
  border-radius: 5px;
  outline: none;
}
  </style>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>

<button *ngIf="isShow" (click)="gotoTop()">👆</button>