Scrolling to top in angular after route change and new component loads not working

scrollPositionRestoration wasn't working for me either. I solved it by not using the "mat-drawer" component from Angular Material with "scrollPositionRestoration: 'enabled'". The scroll position of "mat-drawer-content" cannot be restored to it's previous scroll state unfortunately. If you aren't using Angular Material, it may be the fault of another component.

If you want to scroll to the top with "mat-drawer" then use this:

// Navigate to the given route
public navigate (route: string): void {
    this.router.navigateByUrl(route)
    document.getElementsByTagName('mat-drawer-content')[0].scrollTo(0, 0)
}

Thankyou to fridoo. I had to apply scroll to 'mat-drawer-content' in my case. works like a charm.

Answer by fridoo.

Maybe scrolling doesn't happen on the window but on some other element. You have to figure out what the scrollable container in your case is. e.g. I use a MatSidenav where scrolling happens on the mat-sidenav-content and use document.getElementsByTagName('mat-sidenav-content')[0].scrollTo(0, 0) to scroll to the top on router events.

scrollPositionRestoration doesn't work if your content is inside your mat-sidenav-content, so if you are using mat-sidenav try this in your app.component:

import { Component } from '@angular/core';
import { Router, Event, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
 
  constructor(router: Router){
    router.events
    .pipe(filter((routerEvent: Event) => routerEvent instanceof NavigationEnd))
    .subscribe(() => document.getElementsByTagName('mat-sidenav-content')[0].scrollTo(0, 0))
  }
}

As MatSideNavContent extends MatDrawerContent which extends CdkScrollable, you can get it like this in your component :

@ViewChild('sidenavContent', {read: MatSidenavContent}) sidenavContentScrollable: MatSidenavContent;

When needed you can set scroll position thanks to CdkScrollable API, like this for example :

if (this.sidenavContentScrollable) {
   this.sidenavContentScrollable.scrollTo({top: 0});
}

In my case the window.scrollTo(0, 0) trick wouldn't work because I actually need to scroll to the top of an overflowing router outlet. If you have a similar issue this is what I did as a workaround:

@Component({
    template: '<router-outlet (activate)="onActivate($event, outlet)" #outlet></router-outlet>',
})
export class MyParentComponent {
    onActivate(e, outlet) {
        outlet.scrollTop = 0;
    }
}