温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Angular 5 Scroll to top on every Route click

javascript - Angular 5每次单击路线时滚动到顶部

发布于 2020-03-29 21:45:02

我使用的是angular5。我有一个仪表板,其中的几个部分内容很少,而几个部分内容太大,以至于在转到顶部时更改路由器时都遇到了问题。每次我需要滚动到顶部时。谁能帮助我解决此问题,以便当我更换路由器时,我的看法始终停留在顶部。

提前致谢。

查看更多

提问者
raihan
被浏览
20
Vega 2020-03-10 20:25

有一些解决方案,请确保将其全部检查:)

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

如果希望有所选择,说不是每个组件都应触发滚动,则可以检查一下:

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

发布
问题

分享
好友

手机
浏览

扫码手机浏览