Angular 7.x.x 最简单的滚动到片段的方法是什么？

Question

在过去的两天里，我一直在搜索如何使用 Angular 将片段滚动到视图中。

假设我们有一个静态网页，其中包含许多 ID 作为片段，并且有一个侧边栏来通过链接导航到这些片段。

我尝试过 Router anchorScroll，只需将此添加到模块中对我没有任何效果。它只会在 URL 中显示片段，但不会滚动。

我也尝试过 viewportScroller。主要问题是第一次它不起作用（例如：您被重定向到具有所需片段的静态页面，但没有发生滚动，如果您在同一页上重复此过程，则可以正常工作；如果您单击具有与正在访问的相同 URL 的侧边导航栏中的链接： ([foo]/[bar]#[fragment]) 也不起作用，因为没有进行任何导航更改。

路由器使用的额外选项：

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled',
  onSameUrlNavigation: 'reload'
};

附注：useHash: true不会有任何变化。

ngOnInit中的viewportScroller：

this.viewportScroller.setOffset([0, 64]);
this.viewportScroller.setHistoryScrollRestoration('auto');

this.router.events.pipe(filter(element => element instanceof Scroll)).subscribe((element: any) => {
  console.log(element)
  this.viewportScroller.scrollToAnchor(element.anchor);
});

如何在不使用以下代码的情况下滚动到片段：

ngOnInit() {
  this.route.fragment.subscribe((fragment: string) => { 
    if (fragment && document.getElementById(fragment) != null) {
      document.getElementById(fragment).scrollIntoView({ behavior: "smooth" });
    }
  });
}

因为我们公司的项目使用TS，所以这种方法虽然可行，但不是TS。请帮我解决一下。

- Exitl0l

Answer 1

我也遇到了同样的问题。请查看Ben Nadel提供的解决方案，适用于Angular 7.X。您可以配置RouterModule以处理锚点滚动，甚至可以在使用片段的锚点上进行多次单击，以下是您需要的代码：

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

希望这有所帮助。

- Tom Schreck

---

碎片滚动对我来说是有效的。但是，该碎片并没有到达页面顶部。我该如何将碎片移到页面顶部？我在这里详细提出了问题：https://dev59.com/0Lbna4cB1Zd3GeqPZVmz - Nitin Avula

Answer 2

当您使用*ngIf或类似的东西时，anchorScrolling: 'enabled'无法正常工作，请参见GitHub问题1和GitHub问题2。

解决此问题的现代一行代码解决方案：https://dev59.com/iVcP5IYBdhLWcg3wa5TQ#64185407

- Tilo