角度 5 在每次路线单击时滚动到顶部

javascript typescript angular scrolltop angular-router

2022-08-30 02:08:36

我正在使用Angular 5。我有一个仪表板，其中我有几个部分内容很小，很少有部分内容太大，以至于我在顶部更换路由器时遇到了问题。每次我需要滚动才能进入顶部。

如何解决此问题，以便在更换路由器时，我的视图始终保持在顶部？

答案 1

有一些解决方案，请务必检查它们:)

选项 1：

路由器插座将在实例化新组件时随时发出事件，因此我们可以使用滚动（例如）到顶部：activate(activate)

应用程序组件.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);
    }
}

选项2：

从Angular6.1开始，我们也可以在热切加载的模块上使用，它将应用于所有路由：{ scrollPositionRestoration: 'enabled' }

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

它还将进行平滑滚动。但是，这在每个路由上执行此操作都不方便。

选项3：

另一种解决方案是在路由器动画上进行顶部滚动。在要滚动到顶部的每个过渡中添加此内容：

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

答案 2

如果您在 Angular 6 中遇到此问题，可以通过将参数添加到 app-routing.module.ts 的 RouterModule 来解决此问题：scrollPositionRestoration: 'enabled'

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