Angular 9 scroll to top on route every change

Question

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?

Does this answer your question? [Angular 2 Scroll to top on Route Change](https://stackoverflow.com/questions/39601026/angular-2-scroll-to-top-on-route-change) — Philipp Meissner, Jun 11 '20 at 12:29
I think I found a great answer to this question it's right [here](https://stackoverflow.com/questions/48048299/angular-5-scroll-to-top-on-every-route-click/48048822) — SaboSuke, Jun 11 '20 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, Jun 11 '20 at 12:43

score 15 · Accepted Answer · answered Jun 11 '20 at 12:29

15

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

answered Jun 11 '20 at 12:29

Iván Pérez

2,278
1
24
49

I'm sorry, but I don't quite understand scrollPositionRestoration, how does it scroll to top ? – SaboSuke Jun 11 '20 at 12:35
2

how to disable smooth scroll and make it snap to top instantly ? – ibrahim Apr 12 '21 at 08:57
@Ibrahim Did you find a solution? – Jul Jun 06 '21 at 09:57
1

@Jul nope. Tell me if you do. – ibrahim Jun 06 '21 at 13:02
I had the same issue (disable smooth scroll) and I had to disable the global css rule `scroll-behavior: smooth;` and apply it only within the pages where I wanted the behaviour instead of within the `html` tag – Tonio Sep 05 '21 at 19:57
is this possible to override scrollPositionRestoration option for specific router.navigate() ? – plusz Mar 10 '22 at 15:42

Angular 9 scroll to top on route every change

1 Answers1