I'm working on a project in which I have a lot of routes and each time I click on a link to go to a specific route the page does not scroll to top automatically which is annoying and not good. Does anyone know how to fix this problem, please?

I'm working on a project in which I have a lot of routes and each time I click on a link to go to a specific route the page does not scroll to top automatically which is annoying and not good. Does anyone know how to fix this problem, please?

• javascript
• angular9

• Does this answer your question? Angular 2 Scroll to top on Route Change – Philipp Meissner Commented Jun 11, 2020 at 12:29
• No sorry I already tried that. – SaboSuke Commented Jun 11, 2020 at 12:32
• I think I found a great answer to this question it's right here – SaboSuke Commented Jun 11, 2020 at 12:38
• Quoting that response, "Since Angular6.1, we can also use { scrollPositionRestoration: 'enabled' } on eagerly loaded modules and it will be applied to all routes" – Iván Pérez Commented Jun 11, 2020 at 12:43
• Yes that will work too. – SaboSuke Commented Jun 11, 2020 at 13:00

1 Answer 1

Add the following configuration to the routing module in the extra options:

const routes: Routes = [ ... ];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

For your interests, the option scrollPositionRestoration can be top (go to top on every navigation change) or enabled (like top, but when going backwards it restores the last position).

More info: https://angular.io/api/router/ExtraOptions