Angular 5 在每次路线点击时滚动到顶部

Question

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

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

原文由 raihan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

---

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

---

选项2：

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

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

它也将进行平滑滚动，已经。但是，这对于在每个路由上都执行此操作很不方便。

---

选项3：

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

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

原文由 Vega 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只需在 app.module.ts 文件中添加这一行：

 RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled' //scroll to the top
})

我正在使用 Angular 11.1.4，它对我有用

原文由 Anis KCHAOU 发布，翻译遵循 CC BY-SA 4.0 许可协议