Ndtyjky

I am trying to scroll to the top of my page on my angular 2 site when the route changes, I have tried the following, but nothing happens, when I change the route from one page to another, the page is scrolled to where it was on the first page:

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)

        });

    }

}

What am I doing wrong?

The router will emit an event when a new component gets loaded in the <router-outlet> so you can attach an event to it.

So in your component with <router-outlet> use:

<router-outlet (activate)="scrollTop($event)">

and then in the same component where you placed <router-outlet> add the following method:

scrollTop(event) {

  window.scroll(0,0);

}

Wait for the component to initialized component before you start scrolling. So better to put this code under ngAfterViewInit function.

 ngAfterViewInit() {

        this.router.events.subscribe((evt) => {

            if (!(evt instanceof NavigationEnd)) {

                return;

            }

            window.scrollTo(0, 0)

        });

    }

This similar issue was faced by me which was due to the style applied to body.
i.e.

body {

    height: 100%;

    overflow-x: hidden;

}

If I removed this style then my layout was badly affected.

Instead of removing style I tried below solution and it worked for me...

Solution:

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

    });



  }

}

  constructor(

    private router: Router,

    private ngZone: NgZone) {

    router.events.subscribe((event: RouterEvent) => {

      this._navigationInterceptor(event);

    });

  }



  private _navigationInterceptor(event: RouterEvent): void {

    if (event instanceof NavigationStart) {

    }

    if (event instanceof NavigationEnd) {

    window.scrollTo({

     top: 0

    });

  // or,  window.scroll(0,0);

    }

  }

This solution works perfectly in my project:

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

    });

  }

}