Angular 2 Scroll to top on Route Change: Solution for Beginners

Angular 2 Scroll to top on Route Change: Why It Matters and How to Implement It

Imagine you are scrolling through a long documentation page, reach the middle, click a link — and end up at the bottom of a new section. Sound familiar? This is exactly the problem solved by the Angular 2 scroll to top on route change mechanism. Without it, the user experience suffers: you have to manually scroll the mouse wheel or press Home, which is annoying and increases bounce rates.

In this article, we will break down how to make Angular automatically scroll the page to the top on every route change. You will learn not only a ready-made solution but also understand why it works this way. The article is written for beginners but will also be useful for experienced developers looking to refresh their knowledge.

Why Doesn't Angular Do This "Out of the Box"?

Angular is a powerful SPA framework, but its behavior during navigation can be surprising. By default, when changing a route, the browser does not reset the scroll position. Why? Because the Angular Router treats the transition as replacing a component inside <router-outlet>, not as loading a new page. The browser thinks: "I'm still on the same document, why should I scroll?"

This is especially noticeable if you have long lists, tables, or documentation. The user clicks a link at the bottom of the page — and the new content opens, but the scroll remains at the bottom. The solution to this problem is to explicitly tell Angular: "Hey, scroll to the top on every transition!"

Two Approaches to the Solution

There are two main ways to implement scroll to top on route change in Angular 2+:

\n
• Global handler in AppComponent — simple, but does not always work correctly with nested routes.
\n
• Using Route Config — more flexible, allows you to configure behavior for each route individually.
\n

We will cover both, but I recommend sticking with the second one — it gives you more control.

Method 1: Simple Global Handler (For Quick Start)

Open your app.component.ts (or root component) and add a subscription to Router events. TypeScript code:

\nimport { Component, OnInit } from '@angular/core';\nimport { Router, NavigationEnd } from '@angular/router';\nimport { filter } from 'rxjs/operators';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit {\n  constructor(private router: Router) {}\n\n  ngOnInit() {\n    this.router.events.pipe(\n      filter(event => event instanceof NavigationEnd)\n    ).subscribe(() => {\n      window.scrollTo(0, 0);\n    });\n  }\n}\n

Here we subscribe to router events, filter only NavigationEnd (the moment when the transition is complete), and call window.scrollTo(0, 0). Simple, but there is a nuance: if you have nested routes (e.g., child routes inside a component), this code may fire too early or not at all.

Method 2: The Right Solution Using Route Config (Recommended)

This approach uses the built-in scrollPositionRestoration option in the Angular Router. Starting from Angular 6.1, it is possible to configure automatic scroll restoration/reset directly in the routing configuration.

Open your app-routing.module.ts and add the scrollPositionRestoration: 'top' option to RouterModule.forRoot():

\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\n\nconst routes: Routes = [\n  { path: '', component: HomeComponent },\n  { path: 'about', component: AboutComponent },\n  { path: 'contact', component: ContactComponent }\n];\n\n@NgMod