Javascript 角度2在路线更改不工作时滚动至顶部

我试图在angular 2站点上滚动到页面顶部，当路径发生变化时，我尝试了以下操作，但没有发生任何事情，当我将路径从一个页面更改到另一个页面时，页面将滚动到第一个页面上的位置：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {
    constructor(private router: Router) { }

    ngOnInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router，NavigationEnd}；
@组成部分({
选择器：“我的应用程序”，
模板：“”，
})
导出类MyAppComponent实现OnInit{
构造函数（专用路由器：路由器）{}
恩戈尼尼特（）{
this.router.events.subscribe（（evt）=>{
如果（！（导航结束的evt实例））{
返回；
}
滚动到（0，0）
});
}
}

---

我做错了什么？

等待组件初始化组件，然后再开始滚动。因此，最好将此代码置于

ngAfterViewInit

函数下

 ngAfterViewInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }

---

我也面临着类似的问题，这是由于身体的风格。 i、 e

如果我删除了这种样式，那么我的布局就会受到严重影响

我尝试了下面的解决方案，而不是删除样式，它对我有效

解决方案：

export class AppComponent implements OnInit {


  constructor(private router: Router, private changeDetect: ChangeDetectorRef) {
  }

  ngOnInit() {
    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      // Change height:100% into auto
      $('body').css('height', 'auto');
      // Successfully scroll back to top
      $('body').scrollTop(0);
      // Remove javascript added styles
      $('body').css('height', '');
      this.changeDetect.detectChanges();
    });

  }
}

---

当在

中加载新组件时，路由器将发出一个事件，以便您可以将事件附加到它

因此，在使用

的组件中，请使用：

然后在放置

的同一组件中添加以下方法：

scrollTop(event) {
  window.scroll(0,0);
}

---

此解决方案在我的项目中非常有效：

export class AppComponent  {
  constructor (
    private _router: Router,
  ) {
    this._subscribeRouteEvents();
  }

  private _subscribeRouteEvents (): void {
    this._router.events.subscribe(e => {
      if (!(e instanceof NavigationEnd)) return;
      window.scrollTo(0, 0);
    });
  }
}

---

在Angular 10.2.x上唯一适用于我的解决方案是使用setTimeout 190ms，甚至更少！如果我把定时器设置在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);
  }
}

---

请尝试

setTimeout（函数（）{window.scrollTo（0300）；}，2）

no，这不起作用，我的控制台日志中没有错误。我尝试过它对我起作用。另一个选项是使用jquery

$（“#content”）.animate（{scrollTop:20}，200）

。仍然不起作用，这很麻烦。您可以提供一个stackblitz来显示问题吗？现在尝试一下。将日志放在

窗口之前。滚动到（0，0）

并检查是否得到执行。我怀疑返回语句是否被执行。我在

窗口前面放了一个console.log。scrollTo（0，0）

并且它没有被执行等等，我的错误，控制台日志被执行了。我尝试了这个，在每个页面上都调用scrollTop，但它没有滚动到页面的顶部。实际上，这确实有效，但只有当我去掉身高：100%到身体这个答案似乎是正确的，我要先做一些测试。

export class AppComponent  {
  constructor (
    private _router: Router,
  ) {
    this._subscribeRouteEvents();
  }

  private _subscribeRouteEvents (): void {
    this._router.events.subscribe(e => {
      if (!(e instanceof NavigationEnd)) return;
      window.scrollTo(0, 0);
    });
  }
}

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