Angular 6，滚动到顶部答案

【问题标题】：Angular 6, scroll to topAngular 6，滚动到顶部
【发布时间】：2019-05-15 17:28:26
【问题描述】：

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

【问题讨论】：

在ngAfterViewInit()试试吧
嘿@Ramya，您在问题中使用的链接仅指向您的本地计算机。为了帮助我们回答您的问题，您能否发布一些代码供我们查看以更好地了解发生了什么？谢谢！

标签： javascript angular typescript angular6 scrollto

【解决方案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

【讨论】：

【解决方案2】：

不久前我遇到了类似的问题，这适用于 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);
      }
    });

  }
}

【讨论】：

我不确定我采取的方法是否正确。但是，我写的不是 window.scrollTo(0,0)，而是 goTop.scrollTo(0,0)，其中 goTop 是一个变量，用于存储位于页面最顶部位置的元素。 var goTop = document.getElementById("scrollPos"); goTop.scrollTo( 0 , 0);

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：

你能解释一下你发布的代码吗？仅代码的答案通常对人们没有太大帮助。