How to scroll to top on every Route click in Angular5 ?

18 Sep, 2020
We can use Router and NavigationEnd from ‘@angular/router’ and hence we can scroll to the top of the webpage for every route.
Approach:
First, we need to import the Router and NavigationEnd from ‘@angular/router’ in both app.module.ts file and app.component.ts.
Then we need to create an instance of those in the constructor function.
After creating the instance we need to use them in the ngOninit() life cycle hook.
In the ngOninit() hook, we need to subscribe to the events of the router and check whether it is an instance of NavigationEnd or not.
Then after checking we can use the window.scrollTo() function with (0,0) coordinates to navigate to the top.
After following the above steps start your project using the below command.
ng serve --open
Below is the implementation of the above steps:
app.module.ts:
Javascript
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { RouterModule, Routes } from '@angular/router';   import { AppComponent } from './app.component';   const routes: Routes = [  { path: '', component: AppComponent },];   @NgModule({  imports:      [ BrowserModule,         RouterModule.forRoot(routes) ],  declarations: [ AppComponent ],  bootstrap:    [ AppComponent ]})export class AppModule { }
app.component.ts:
Javascript
import { Component, OnInit } from '@angular/core';import { Router, NavigationEnd } from '@angular/router';  @Component({    selector: 'app-root',    templateUrl: './app.component.html'})export class AppComponent implements OnInit {    constructor(private router: Router) { }          ngOnInit() {        this.router.events.subscribe((event) => {            if (!(event instanceof NavigationEnd)) {                return;            }            window.scrollTo(0, 0)        });    }}
app.component.html:
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"    rel="stylesheet"><div class="jumbotron">    <h1 class="display-4">Hello,Geek!</h1>    <p class="lead">        GeeksForGeeks is a website which         is a one stop destination for all         the computer science related        doubts.    </p>      <hr class="my-4">      <p>        Click on the below button         to starting learning.    </p>      <p class="lead">        <a class="btn btn-primary btn-lg"             href="#" role="button">            Explore        </a>    </p></div>  <div class="card">    <div class="card-header">        Featured    </div>    <div class="card-body">        <h5 class="card-title">            Front End Technologies        </h5>        <p class="card-text">            HTML, CSS, Javascript,             Angular, React.js        </p>          <a href="#" class="btn btn-primary">            Start Learning        </a>    </div></div><br>  <div class="card">    <div class="card-header">        Featured    </div>    <div class="card-body">        <h5 class="card-title">            Backend Technologies        </h5>        <p class="card-text">            Node.js, Django,Express        </p>          <a href="#" class="btn btn-primary">            Start Learning        </a>    </div></div>
Output:
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Auth Guards in Angular 9/10/11
Routing in Angular 9/10
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?