[解決済み] Angular 5 Routeクリック毎にトップにスクロールする。

質問

Angular5を使用しています。ダッシュボードには、小さなコンテンツのセクションと大きなコンテンツのセクションがあり、ルーターを変更する際に問題が発生しました。私はトップに移動するために毎回スクロールする必要があります。

ルーターを変更しても、常に一番上に表示されるようにするには、どうすればよいでしょうか。

解決方法は？

いくつかの解決策がありますので、すべて確認してください :)

オプション1:

ルーターコンセントから発せられる activate イベントは、新しいコンポーネントがインスタンス化されるたびに発生します。 (activate) を使えば、（例えば）一番上までスクロールすることができます。

app.component.html

<router-outlet (activate)="onActivate($event)"></router-outlet>

app.component.ts

onActivate(event) {
   // window.scroll(0,0);

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

    //or document.body.scrollTop = 0;
    //or document.querySelector('body').scrollTo(0,0)
    ...
}

Safariではスムーススクロールがうまく実装されていないため、例えば以下のように使用します。 この解決策 を使用すると、スムーズにスクロールすることができます。

onActivate(event) {
    let scrollToTop = window.setInterval(() => {
        let pos = window.pageYOffset;
        if (pos > 0) {
            window.scrollTo(0, pos - 20); // how far to scroll on each step
        } else {
            window.clearInterval(scrollToTop);
        }
    }, 16);
}

すべてのコンポーネントがスクロールを開始するわけではない、というように選択的でありたい場合、そのチェックは if のように記述します。

onActivate(e) {
    if (e.constructor.name)==="login"{ // for example
            window.scroll(0,0);
    }
}

Option2:

Angular6.1以降では、この他に { scrollPositionRestoration: 'enabled' } を実行すると、すべてのルートに適用されます。

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

スムーススクロールもやってくれるよ、もう。しかし、これはすべてのルーティングでそれを行うための不便さを持っています。

オプション3:

もう一つの解決策は、ルーターアニメーションでトップスクロールを行うことです。これは、上部にスクロールさせたいすべてのトランジションに追加します。

query(':enter, :leave', style({ position: 'fixed' }), { optional: true })