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

質問

私はangular 5を使用しています。ダッシュボードに小さなコンテンツのセクションと大きなコンテンツのセクションがあり、ルーターを変更する際に問題が発生しました。私はトップに移動するためにスクロールする必要がありますたびに。私はルータを変更したときに私のビューは常に一番上に滞在するように、誰もがこの問題を解決するために私を助けることができる。

よろしくお願いします。

どのように解決するのですか？

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

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

app.component.html

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

app.component.ts

onActivate(event) {
    window.scroll(0,0);
    //or document.body.scrollTop = 0;
    //or document.querySelector('body').scrollTo(0,0)
    ...
}

例えば、以下のように使用します。 この解決策 を使用すると、スムーズにスクロールすることができます。

    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);
    }
}

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

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

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

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

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