Page not scrolling to top while navigating in angular

Question

In my app while routing urls the page which loads is not scrolling to top automatically. It remains the same position as the previous screen.

Answer 1

Try this in your app component :

TS:

import { Router ,NavigationEnd} from '@angular/router';
export class AppComponent{
    constructor(private router: Router) {}

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

HTML:

<router-outlet></router-outlet>

Answer 2

Try this in your app.component.ts

import { Component } from '@angular/core'; 
import { Router, NavigationEnd } from '@angular/router'; 
import { Subscription } from 'rxjs/Rx';

@Component({
    moduleId: module.id, 
    selector: ‘my-app’,
    template: `<router-outlet></router-outlet>`
})

export class AppComponent {
    routerSubscription: Subscription;

    constructor(private router: Router) {}

    ngOnInit() {
        this.routerSubscription = this.router.events
            .filter(event => event instanceof NavigationEnd)
            .subscribe(event => {
                document.body.scrollTop = 0;
            });
    }

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

remove <router-outlet></router-outlet> from app.component.html