Angular 9 在每次更改时滚动到顶部

Posted 2023-02-22

【中文标题】Angular 9 在每次更改时滚动到顶部

【英文标题】：Angular 9 scroll to top on route every change

【发布时间】：2020-10-01 02:19:31

【问题描述】：

我正在做一个项目，其中有很多路线，每次单击链接转到特定路线时，页面都不会自动滚动到顶部，这既烦人又不好。请问有谁知道如何解决这个问题？

【问题讨论】：

这能回答你的问题吗？ Angular 2 Scroll to top on Route Change

不抱歉，我已经尝试过了。

我想我找到了一个很好的答案来回答这个问题，这是正确的here

引用该响应，“从 Angular6.1 开始，我们还可以在急切加载的模块上使用 scrollPositionRestoration: 'enabled' ，它将应用于所有路由”

是的，这也可以。

【参考方案1】：

在额外选项的路由模块中添加如下配置：

const routes: Routes = [ ... ];

@NgModule(
  imports: [RouterModule.forRoot(routes, 
    scrollPositionRestoration: 'enabled'
  )],
  exports: [RouterModule]
)
export class AppRoutingModule  

为了您的兴趣，选项scrollPositionRestoration 可以是top（每次导航更改时都转到顶部）或enabled（与顶部类似，但向后退时会恢复到最后一个位置）。

更多信息：https://angular.io/api/router/ExtraOptions

【讨论】：

不好意思，scrollPositionRestoration不太懂，怎么滚动到顶部？

如何禁用平滑滚动并使其立即卡到顶部？

@Ibrahim 你找到解决方案了吗？

@Jul 不。告诉我你是否这样做。

我遇到了同样的问题（禁用平滑滚动），我不得不禁用全局 css 规则 scroll-behavior: smooth; 并仅在我想要该行为的页面中应用它，而不是在 html 标签内