[SOLVED] Angular – scrollPositionRestoration on only one route

Issue

I want to disable scrollPositionRestoration on one page. Let’s say I have the following routes in my app-routing.module.ts file…

const appRoutes: Routes = [{ path: 'home', component: myComponent}, { path: 'about', component: myComponent}, ]

and I have my imports as follows…

@NgModule({imports: [RouterModule.forRoot(appRoutes, {
    scrollPositionRestoration: 'enabled'
})]

How would I disable the scollPositionRestoration on the ‘about’ route?

Solution

Do not use: scrollPositionRestoration: 'enabled'

Reset back to:

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

Then use this in your home.component.ts only:

scrollTop() {
    window.scroll(0, 0);
  }

Then add (click)="scrollTop()" where you want to execute it.

Answered By – plus

Answer Checked By – Senaida (BugsFixing Volunteer)