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

Question

I was building a basic Angular application, I have a few components, from my home page when I go to out services page, and scroll down, and go back to home page, the scroll is set to bottom of page.

I would like to set my scroll to top every time i open up a component.

Since I am using angular7 I tried using the option available in router,

{scrollPositionRestoration : 'enabled'}

then

{scrollPositionRestoration : 'top'},

but it didn't work on Chrome nor on Chrome mobile or on Edge.

Other than that, I tried to set a listener on router and using window.scrollTop(0,0), that didn't work either, neither did using the document variable.

I just want my scroll bar at top. Its such a naive thing but it has frustrated me now.

check this https://stackoverflow.com/questions/39601026/angular-2-scroll-to-top-on-route-change — PawelC, Apr 04 '19 at 09:32
That didn't work. I checked it earlier, that is where it is said to use the new option available in router. — Piyush dhore, Apr 04 '19 at 09:43
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. — frido, Apr 04 '19 at 09:50

Sert42 · Answer 1 · 2019-08-13T07:33:05.587

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

score 3 · Answer 2 · answered Apr 04 '19 at 11:06

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.

How to find out which component is causing this behavior? – JulianProg Feb 25 '21 at 23:01 — JulianProg, Feb 25 '21 at 23:01

score 2 · Answer 3 · answered Apr 30 '21 at 01:37

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

score 1 · Answer 4 · edited May 19 '22 at 18:56

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

score 0 · Answer 5 · edited May 19 '21 at 02:34

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

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

5 Answers5