Question

我当前正在使用Angular 6.1.5。当网站路由到其他页面时，我希望页面可以滚动回到顶部。我尝试使用{ scrollPositionRestoration: 'top' }，但不起作用。

这是我在app.routing.ts中的代码。

export const routing = RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'top' });

是否有替代方法？我尝试从“最高”更改为“启用”，但效果不佳。我还尝试了window.scrollTo(0,0);并将其放在ngOnInit()中，但这也不起作用。

Answer 1

在我的情况下不起作用，因为我的 CSS 上有这个。

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

我改成

scroll-behavior: auto;

然后它开始工作

Answer 2

更新代码中的选项，并为其提供一个scrollOffset。

export const routing = RouterModule.forRoot(appRoutes, { scrollOffset: [0, 0], scrollPositionRestoration: 'top' });

另一种选择是更“手动”执行。这是StackBlitz的演示方法。基本上，可以在应用程序的输入组件（或带有表单的应用程序区域的输入组件）中订阅路由器事件，并可以在NavigationEnd上使用window.scrollTo

import { Component } from '@angular/core';
import { Router, Event, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent  {
  constructor(
    router: Router
  ) {
    router.events
          .pipe(filter((routerEvent: Event) => routerEvent instanceof NavigationEnd))
          .subscribe(() => window.scrollTo(0, 0));
  }
}

Answer 3

由于使用的是路由器插座，所以components元素的大小可能为0x0。
通过在app-root上添加CSS规则以显示块，使scrollPositionRestoration起作用：

app-root {
   display: block;
}

export const routing = RouterModule.forRoot(appRoutes, { scrollOffset: [0, 0], scrollPositionRestoration: 'top' });

应该可以。

Answer 4

对我而言，在Angular 10.2.x上唯一适用的解决方案是使用setTimeout持续190毫秒！如果我将计时器设置为190ms以下，则无法滚动！

当我将计时器设置为300ms时，我可以看到路由后页面如何首先滚动到不需要的位置，然后页面滚动至0（应有的位置）。我仍然不知道Angular中的哪个过程会导致在转到页面后不必要的滚动。

我尝试了其他建议的解决方案。例如，例如更改scrollPositionRestoration属性的值并在AfterViewInit挂钩中执行强制滚动，更改body标签的全局高度并在路由器出口等上使用（激活），但这仅是有帮助的。这很可能是Angular 10.2.x路由器中的某种错误

constructor(
  private router: Router,
) {
  router.events.subscribe(event => {
  if (event instanceof NavigationEnd) {
    setTimeout(() => {
      document.documentElement.scrollTop = 0; // || window.scrollTo(0, 0);
    }, 190);
  }
}

角度-无法使用“ scrollPositionRestoration”

4 个答案: