Scroll to the top on Angular route change

By default, Angular doesn't scroll to the top of the page when you're navigating to another page. Here is a quick tip on how to implement scrolling.

Implement a scroll service

At first, create a new service called ScrollTopService. On a server side (Angular Universal) we don't need this "hack" so it's limited only to a browser.

scrolltop.service.ts

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { isPlatformBrowser } from '@angular/common';

@Injectable()
export class ScrollTopService {

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

  setScrollTop() {
    if (isPlatformBrowser(this.platformId)) {
      this.router.events.subscribe((event: NavigationEnd) => {
        window.scroll(0, 0);
      });
    }
  }
}

Register the service by adding it into app.module.ts

import { ScrollTopService } from 'your/path/scrolltop.service';

@NgModule({
  ...
  providers: [
    ScrollTopService,
    ...
  ]
})

Inject the service into a component

Inject new service into a component and then call the setScrollTop method on ngInit to initialize scrolling.

Example app.component.ts

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

import { ScrollTopService } from 'your/path/scrolltop.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

  constructor(
    private scrollTopService: ScrollTopService
  ) {}

  ngOnInit() {
    this.scrollTopService.setScrollTop();
  }
}

Edited on 11th of June, 2019