Return to top of page on RouterLink

I will preface this by saying that there are several answers online for this exact same purpose with an Angular app. However, none of these appear to be working for me.
I have so far tried nearly everything from these issues
1 , 2 , 3 , 4 and a couple of other but I am still not getting the correct behavior.

Currently, if I am scrolled down and viewing a route, then I click on the item to view a new route via routerLink, the page stays in the same position. This causes some issues especially when on a smaller screen or when looking down a long list of items.

In the current app, my AppComponent is as follows (I am using Angular Material):

<app-header></app-header>
<mat-sidenav-container class="main-sidenav">

  <mat-sidenav class="sidenav"#sidenav [mode]="mode" [opened]="openSidenav">
    <app-sidenav></app-sidenav>
  </mat-sidenav>
  <mat-sidenav-content>

    <router-outlet></router-outlet>

  </mat-sidenav-content>
</mat-sidenav-container>

The router-outlet is displaying one of the following:

  • A workout page with a list and filter
  • A workout “detail page” that shows the workout description

In the workout list, when an item is clicked, it has a routerLink: <a [routerLink]="[i]"> where i is the index of the current workout coming from an array (from a firebase database in my case).

Here is the stackblitz to this code. The workouts-page can be found at src/app/features/workouts-page/ and then the workout-list, workout-filter, and workout-detail showing up accordingly. However, when clicked on the routerLink, the scroll position stays the same on the workout detail page.

Since Angular 6+, the recommended method has been to use, within your routing module:

...
  imports: [RouterModule.forRoot(routes,{scrollPositionRestoration: 'top'})
...

At the same time, you could also use “enabled” and get the same result. This does not change any behavior in the application I am running. Furthermore, I have tried a few “work-arounds” such as adding the following to my main component:

export class MyAppComponent implements OnInit {
    constructor(private router: Router) { }

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

This workaround and many others have once again not changed the behavior and it leaves the page in the same scroll position as before the router was clicked. One different method from the GitHub request is to add an (activate)="onActivate($event) to the <router-outlet>, where the function runs window.scrollTo(0, 0);. Still, this doesn’t seem to be working. I can even put the window.scrollTo(0,0) or scrollTop() in the ngOnInit of any component related to the router outlet, and you guessed it, still no change.

I figured this had to do with the css of the page altogether so I changed my body and html positioning as mentioned in stack overflow issues with the same end result.

Is there a way that I can “reset” the scroll position when a route is clicked with the routerLink property so the page doesn’t stay in the same scrolled position when the route is loaded?

Source: New feed
Source Url Return to top of page on RouterLink