layout.component.pug

Question

在我的Angular 2应用程序中，当我向下滚动页面并单击页面底部的链接时，它确实会更改路径并将我带到下一页但它不会滚动到页面顶部。结果，如果第一页很长而第二页的内容很少，则给人的印象是第二页缺少内容。由于只有当用户滚动到页面顶部时内容才可见。

我可以在组件的ngInit中将窗口滚动到页面顶部但是，有没有更好的解决方案可以自动处理我的应用程序中的所有路径？

Answer 1

您可以在主要组件上注册路线更改侦听器，并在路线更改时滚动到顶部。

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)
        });
    }
}

Answer 2

Angular 6.1及更高版本：

Angular 6.1（发布于2018-07-25）通过名为＆＃34;路由器滚动位置恢复＆＃34;的功能，增加了内置支持来解决此问题。如官方Angular blog中所述，您只需在路由器配置中启用此功能，如下所示：

RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})

此外，博客声明＆＃34;预计这将成为未来主要版本的默认版本＆＃34;。到目前为止，这还没有发生（从Angular 7.x开始），但最终你不需要在你的代码中做任何事情，这将只是开箱即用。

Angular 6.0及更早版本：

虽然@ GuilhermeMeireles的优秀答案修复了原始问题，但它引入了一个新问题，打破了向后或向前导航时的正常行为（使用浏览器按钮或通过代码中的位置）。预期的行为是，当您导航回页面时，它应该保持向下滚动到您单击链接时的相同位置，但是当到达每个页面时滚动到顶部显然会打破这种期望。

下面的代码扩展逻辑以通过订阅Location的PopStateEvent序列来检测这种导航，并且如果新到达的页面是这样的事件的结果，则跳过滚动到顶部的逻辑。 / p>

如果您导航回来的页面足够长以覆盖整个视口，则滚动位置会自动恢复，但正如@JordanNelson正确指出的那样，如果页面较短，则需要跟踪原始y滚动位置并在返回页面时显式恢复。更新版本的代码也涵盖了这种情况，总是明确地恢复滚动位置。

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { Location, PopStateEvent } from "@angular/common";

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

    private lastPoppedUrl: string;
    private yScrollStack: number[] = [];

    constructor(private router: Router, private location: Location) { }

    ngOnInit() {
        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 3

从Angular 6.1开始，您现在可以避免麻烦，并将extraOptions作为第二个参数传递给RouterModule.forRoot()，并且可以指定scrollPositionRestoration: enabled来告诉Angular每当路线更改时滚动到顶部

默认情况下，您会在app-routing.module.ts中找到它：

const routes: Routes = [
  {
    path: '...'
    component: ...
  },
  ...
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled', // Add options right here
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Angular Official Docs

Answer 4

您可以利用可观察的filter方法更简洁地写出来：

this.router.events.filter(event => event instanceof NavigationEnd).subscribe(() => {
      this.window.scrollTo(0, 0);
});

如果您在使用Angular Material 2 sidenav时滚动到顶部时出现问题，这将有所帮助。窗口或文档正文不会有滚动条，因此您需要获取sidenav内容容器并滚动该元素，否则请尝试滚动窗口作为默认值。

this.router.events.filter(event => event instanceof NavigationEnd)
  .subscribe(() => {
      const contentContainer = document.querySelector('.mat-sidenav-content') || this.window;
      contentContainer.scrollTo(0, 0);
});

此外，Angular CDK v6.x现在有scrolling package可能有助于处理滚动。

Answer 5

如果您有服务器端呈现，则应注意不要在服务器上使用windows运行代码，该变量不存在。这会导致代码破坏。

export class AppComponent implements OnInit {
  routerSubscription: Subscription;

  constructor(private router: Router,
              @Inject(PLATFORM_ID) private platformId: any) {}

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.routerSubscription = this.router.events
        .filter(event => event instanceof NavigationEnd)
        .subscribe(event => {
          window.scrollTo(0, 0);
        });
    }
  }

  ngOnDestroy() {
    this.routerSubscription.unsubscribe();
  }
}

isPlatformBrowser是一个函数，用于检查应用程序呈现的当前平台是否为浏览器。我们给它注入platformId。

还可以检查是否存在变量windows，这样安全，如下：

if (typeof window != 'undefined')

Answer 6

只需点击操作即可轻松完成

在主要组件html中引用#scrollContainer

<div class="main-container" #scrollContainer>
    <router-outlet (activate)="onActivate($event, scrollContainer)"></router-outlet>
</div>

在主要组件.ts

onActivate(e, scrollContainer) {
    scrollContainer.scrollTop = 0;
}

Answer 7

最好的答案在于Angular GitHub讨论（Changing route doesn't scroll to top in the new page）。

也许您只想在根路由器更改中进入顶部（不在儿童中，因为您可以在f.e中加载延迟加载的路由。一个标签集）

app.component.html

<router-outlet (deactivate)="onDeactivate()"></router-outlet>

app.component.ts

onDeactivate() {
  document.body.scrollTop = 0;
  // Alternatively, you can scroll to top by using this other call:
  // window.scrollTo(0, 0)
}

完全归功于JoniJnm（original post）

Answer 8

Angular最近引入了一项新功能，即在角度路由模块内部进行如下更改

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

Answer 9

您可以将AfterViewInit生命周期挂钩添加到组件中。

ngAfterViewInit() {
   window.scrollTo(0, 0);
}

Answer 10

这是我提出的解决方案。我将LocationStrategy与Router事件配对。使用LocationStrategy设置一个布尔值，以了解用户当前浏览浏览器历史记录的时间。这样，我不必存储一堆URL和y滚动数据（无论如何都不能很好地工作，因为每个数据都是基于URL替换的）。当用户决定在浏览器上按住后退或前进按钮并返回或转发多个页面而不仅仅是一个页面时，这也解决了边缘情况。

P.S。我只测试了IE，Chrome，FireFox，Safari和Opera的最新版本（截至本文）。

希望这有帮助。

export class AppComponent implements OnInit {
  isPopState = false;

  constructor(private router: Router, private locStrat: LocationStrategy) { }

  ngOnInit(): void {
    this.locStrat.onPopState(() => {
      this.isPopState = true;
    });

    this.router.events.subscribe(event => {
      // Scroll to top if accessing a page, not via browser history stack
      if (event instanceof NavigationEnd && !this.isPopState) {
        window.scrollTo(0, 0);
        this.isPopState = false;
      }

      // Ensures that isPopState is reset
      if (event instanceof NavigationEnd) {
        this.isPopState = false;
      }
    });
  }
}

Answer 11

如果您只需要将页面滚动到顶部，就可以执行此操作（不是最佳解决方案，但速度很快）

document.getElementById('elementId').scrollTop = 0;

Answer 12

从Angular 6.1开始，路由器提供了一个名为scrollPositionRestoration的{{3}}，旨在满足这种情况。

imports: [
  RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'
  }),
  ...
]

Answer 13

此解决方案基于@FernandoEcheverria和@GuilhermeMeireles的解决方案，但它更为简洁，并且可以与Angular Router提供的popstate机制一起使用。这样可以存储和还原多个连续导航的滚动级别。

我们将每个导航状态的滚动位置存储在地图scrollLevels中。一旦出现popstate事件，Angular Router将提供即将恢复的状态的ID：event.restoredState.navigationId。然后用于从scrollLevels获取该状态的最后滚动级别。

如果该路线没有存储的滚动级别，它将按照您的期望滚动到顶部。

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

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
export class AppComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
    const scrollLevels: { [navigationId: number]: number } = {};
    let lastId = 0;
    let restoredId: number;

    this.router.events.subscribe((event: Event) => {

      if (event instanceof NavigationStart) {
        scrollLevels[lastId] = window.scrollY;
        lastId = event.id;
        restoredId = event.restoredState ? event.restoredState.navigationId : undefined;
      }

      if (event instanceof NavigationEnd) {
        if (restoredId) {
          // Optional: Wrap a timeout around the next line to wait for
          // the component to finish loading
          window.scrollTo(0, scrollLevels[restoredId] || 0);
        } else {
          window.scrollTo(0, 0);
        }
      }

    });
  }

}

Answer 14

从 Angular 6.1 开始，我们可以在急切加载的模块或仅在 app.module 中使用以下内容，它将应用于所有路由

{ scrollPositionRestoration: 'enabled' }

完整语法：

RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })

文档中的更多详细信息：https://angular.io/api/router/ExtraOptions#scrollPositionRestoration

Answer 15

对于iphone / ios safari，您可以使用setTimeout

进行换行

setTimeout(function(){
    window.scrollTo(0, 1);
}, 0);

Answer 16

您还可以在Route.ts中使用scrollOffset。参考celluloid

@NgModule({
  imports: [
    SomeModule.forRoot(
      SomeRouting,
      {
        scrollPositionRestoration: 'enabled',
        scrollOffset:[0,0]
      })],
  exports: [RouterModule]
})

Answer 17

大家好，这对我有用。我只需要引用父级滚动路由器更改`

layout.component.pug

.wrapper(#outlet="")
    router-outlet((activate)='routerActivate($event,outlet)')

layout.component.ts

 public routerActivate(event,outlet){
    outlet.scrollTop = 0;
 }`

Answer 18

此代码背后的主要思想是将所有访问过的URL以及相应的scrollY数据保存在一个数组中。每次用户放弃页面（NavigationStart）时，都会更新此数组。每次用户进入新页面（NavigationEnd）时，我们决定恢复Y位置或不依赖于我们如何到达此页面。如果在某个页面上使用了引用，我们滚动到0.如果使用浏览器后退/前进功能，我们滚动到保存在我们的数组中的Y.对不起我的英文：）

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Location, PopStateEvent } from '@angular/common';
import { Router, Route, RouterLink, NavigationStart, NavigationEnd, 
    RouterEvent } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'my-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {

  private _subscription: Subscription;
  private _scrollHistory: { url: string, y: number }[] = [];
  private _useHistory = false;

  constructor(
    private _router: Router,
    private _location: Location) {
  }

  public ngOnInit() {

    this._subscription = this._router.events.subscribe((event: any) => 
    {
      if (event instanceof NavigationStart) {
        const currentUrl = (this._location.path() !== '') 
           this._location.path() : '/';
        const item = this._scrollHistory.find(x => x.url === currentUrl);
        if (item) {
          item.y = window.scrollY;
        } else {
          this._scrollHistory.push({ url: currentUrl, y: window.scrollY });
        }
        return;
      }
      if (event instanceof NavigationEnd) {
        if (this._useHistory) {
          this._useHistory = false;
          window.scrollTo(0, this._scrollHistory.find(x => x.url === 
          event.url).y);
        } else {
          window.scrollTo(0, 0);
        }
      }
    });

    this._subscription.add(this._location.subscribe((event: PopStateEvent) 
      => { this._useHistory = true;
    }));
  }

  public ngOnDestroy(): void {
    this._subscription.unsubscribe();
  }
}

Answer 19

这对我来说最适合所有导航更改，包括哈希导航

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this._sub = this.route.fragment.subscribe((hash: string) => {
    if (hash) {
      const cmp = document.getElementById(hash);
      if (cmp) {
        cmp.scrollIntoView();
      }
    } else {
      window.scrollTo(0, 0);
    }
  });
}

Answer 20

window.scrollTo()在Angular 5中对我不起作用，所以我像这样使用document.body.scrollTop，

this.router.events.subscribe((evt) => {
   if (evt instanceof NavigationEnd) {
      document.body.scrollTop = 0;
   }
});

Answer 21

除了@Guilherme Meireles提供的完美答案，如下所示，您可以通过添加如下所示的平滑滚动来调整实现

 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)
            });
        }
    }

然后在下面添加代码段

 html {
      scroll-behavior: smooth;
    }

至您的styles.css

Answer 22

如果要使用相同的路线加载不同的组件，则可以使用ViewportScroller来实现相同的目的。

import { ViewportScroller } from '@angular/common';

constructor(private viewportScroller: ViewportScroller) {}

this.viewportScroller.scrollToPosition([0, 0]);

Answer 23

窗口顶部滚动
在所有情况下，window.pageYOffset和document.documentElement.scrollTop均返回相同的结果。 IE 9以下不支持window.pageYOffset。

app.component.ts

import { Component, HostListener, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
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: 10, 
      behavior: 'smooth' 
    });
  }
}

app.component.html

<style>
  p {
  font-family: Lato;
}

button {
  position: fixed;
  bottom: 5px;
  right: 5px;
  font-size: 20px;
  text-align: center;
  border-radius: 5px;
  outline: none;
}
  </style>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, repudiandae quia. Veniam amet fuga, eveniet velit ipsa repudiandae nemo? Sit dolorem itaque laudantium dignissimos, rerum maiores nihil ad voluptates nostrum.
</p>

<button *ngIf="isShow" (click)="gotoTop()">?</button>

Answer 24

使用Router本身会导致无法完全克服的问题，以保持一致的浏览器体验。在我看来，最好的方法是只使用自定义directive并让它重置点击滚动。关于这一点的好处是，如果你与你点击的url相同，页面也会滚动回到顶部。这与普通网站一致。基本directive看起来像这样：

import {Directive, HostListener} from '@angular/core';

@Directive({
    selector: '[linkToTop]'
})
export class LinkToTopDirective {

    @HostListener('click')
    onClick(): void {
        window.scrollTo(0, 0);
    }
}

具有以下用途：

<a routerLink="/" linkToTop></a>

这对于大多数用例来说已经足够了，但我可以想象一些可能的问题由此产生：

由于universal

window

对速度检测的速度影响较小，因为每次点击都会触发
无法禁用此指令

实际上很容易克服这些问题：

@Directive({
  selector: '[linkToTop]'
})
export class LinkToTopDirective implements OnInit, OnDestroy {

  @Input()
  set linkToTop(active: string | boolean) {
    this.active = typeof active === 'string' ? active.length === 0 : active;
  }

  private active: boolean = true;

  private onClick: EventListener = (event: MouseEvent) => {
    if (this.active) {
      window.scrollTo(0, 0);
    }
  };

  constructor(@Inject(PLATFORM_ID) private readonly platformId: Object,
              private readonly elementRef: ElementRef,
              private readonly ngZone: NgZone
  ) {}

  ngOnDestroy(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.elementRef.nativeElement.removeEventListener('click', this.onClick, false);
    }
  }

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.ngZone.runOutsideAngular(() => 
        this.elementRef.nativeElement.addEventListener('click', this.onClick, false)
      );
    }
  }
}

这会考虑大多数用例，使用与基本用法相同的用法，具有启用/禁用它的优点：

<a routerLink="/" linkToTop></a> <!-- always active -->
<a routerLink="/" [linkToTop]="isActive"> <!-- active when `isActive` is true -->

广告，如果您不想做广告，请不要阅读

可以进行另一项改进，以检查浏览器是否支持passive个事件。这会使代码复杂化，如果要在自定义指令/模板中实现所有这些，则有点模糊。这就是为什么我写了一些library来解决这些问题的原因。要使用与上面相同的功能，并使用添加的passive事件，如果使用ng-event-options库，则可以将指令更改为此。逻辑在click.pnb侦听器中：

@Directive({
    selector: '[linkToTop]'
})
export class LinkToTopDirective {

    @Input()
    set linkToTop(active: string|boolean) {
        this.active = typeof active === 'string' ? active.length === 0 : active;
    }

    private active: boolean = true;

    @HostListener('click.pnb')
    onClick(): void {
      if (this.active) {
        window.scrollTo(0, 0);
      }        
    }
}

Answer 25

适合所有正在寻找解决方案并阅读这篇文章的人。

imports: [
  RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'
  }),
  ...
]

不回答该主题的问题。如果我们研究Angular源代码，那么我们可以在其中读到有趣的代码：

因此，这些内容仅适用于反向导航。解决方案之一可能是这样的：

constructor(router: Router) {

    router.events
        .pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd))
        .subscribe(() => {
            this.document.querySelector('#top').scrollIntoView();
        });
}

这将在每个导航到具有该ID的div并滚动到它；

执行此操作的另一种方法是使用相同的逻辑，但要借助装饰器或指令，这将使您可以选择在何处以及何时滚动顶部；

Answer 26

@Fernando Echeverria 大！但是这段代码在哈希路由器或懒惰路由器中不起作用。因为它们不会触发位置更改。可以试试这个：

＆＃13;

private lastRouteUrl: string[] = []
  

ngOnInit(): void {
  this.router.events.subscribe((ev) => {
    const len = this.lastRouteUrl.length
    if (ev instanceof NavigationEnd) {
      this.lastRouteUrl.push(ev.url)
      if (len > 1 && ev.url === this.lastRouteUrl[len - 2]) {
        return
      }
      window.scrollTo(0, 0)
    }
  })
}

＆＃13;

Answer 27

lastRoutePath?: string;

ngOnInit(): void {
  void this.router.events.forEach((event) => {
    if (event instanceof ActivationEnd) {
      if (this.lastRoutePath !== event.snapshot.routeConfig?.path) {
        window.scrollTo(0, 0);
      }
      this.lastRoutePath = event.snapshot.routeConfig?.path;
    }
  });
}

如果您停留在同一页面上，它不会滚动到顶部，而只会更改 slug / id 或其他内容

Angular 2滚动到路线更改顶部

27 个答案:

layout.component.pug

layout.component.ts