Question

我在angular 6应用程序中遇到了一个问题。附加路线后，滚动条不会更改其位置。路由添加后，我希望它滚动到页面顶部。 http://localhost:4200/#/pending-transfer是初始路线。用户单击页面中的按钮后，路由将附加到http://localhost:4200/#/pending-transfer/2595/62。我曾尝试在window.scrollTo(0,0)中使用ngOnInit()，但这没用。

Answer 1

如果您使用的是Angular v6或更高版本，则可以简单地在路由配置的其他选项中设置此选项，如下所示-

@NgModule({
  imports: [
      RouterModule.forRoot(routes, {
         scrollPositionRestoration: 'top'
      })
  ]
})
export class AppRoutingModule {}

这将始终在导航时将滚动位置设置为顶部。

有关更多详细信息，请参见此处-

Deep dive into Angular Routing — Scrolling to top, Debugging and lot more

Answer 2

如果您使用的是角材侧导航组件，请使用以下代码：

const element = document.querySelector('mat-sidenav-content') || window;
element.scrollTo(0, 0);

Answer 3

前一段时间，我遇到了类似的问题，这对Angular 4很有用。希望您也可以使用它。这在 app.component.ts 中：

export class AppComponent {
  constructor(private router: Router, private route: ActivatedRoute, private location: Location) { }

  private lastPoppedUrl: string;
  private yScrollStack: number[] = [];

  ngOnInit() {
    const path = this.route.snapshot.queryParams['path'];
    const navigateTo = '/' + path;

    if (path) {
      this.router.navigate([navigateTo]);
    }

    this.location.subscribe((ev: PopStateEvent) => {
      this.lastPoppedUrl = ev.url;
    });

    this.router.events.subscribe((ev: any) => {
      if (ev instanceof NavigationStart) {
        if (ev.url != this.lastPoppedUrl)
          this.yScrollStack.push(window.scrollY);
      } else if (ev instanceof NavigationEnd) {
        if (ev.url == this.lastPoppedUrl) {
          this.lastPoppedUrl = undefined;
          window.scrollTo(0, this.yScrollStack.pop());
        } else
          window.scrollTo(0, 0);
      }
    });

  }
}

Answer 4

app.component.ts 插入这段代码

    export class AppComponent {
  
  isShow: boolean;
  topPosToStartShowing = 100;

  @HostListener('window:scroll')
  checkScroll() {
      
    const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

    console.log('[scroll]', scrollPosition);
    
    if (scrollPosition >= this.topPosToStartShowing) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
  }

  gotoTop() {
    window.scroll({ 
      top: 0, 
      left: 0, 
      behavior: 'smooth' 
    });
  }
}

然后在 app.component.html 上打开创建顶部按钮示例代码：

    <button class="button" *ngIf="isShow" (click)="gotoTop()">
Top ↑ </button>

角度6，滚动到顶部

4 个答案: