¿Cómo desplazarse hacia arriba en cada clic de ruta en Angular5?

Podemos usar Router y NavigationEnd desde ‘@angular/router’ y, por lo tanto, podemos desplazarnos hasta la parte superior de la página web para cada ruta.

Acercarse:

• Primero, necesitamos importar el enrutador y NavigationEnd desde ‘@angular/router’ tanto en el archivo app.module.ts como en app.component.ts.
• Luego necesitamos crear una instancia de aquellos en la función constructora.
• Después de crear la instancia, debemos usarla en el gancho del ciclo de vida ngOninit() .
• En el gancho ngOninit(), debemos suscribirnos a los eventos del enrutador y verificar si es una instancia de NavigationEnd o no.
• Luego, después de verificar, podemos usar la función window.scrollTo() con coordenadas (0,0) para navegar hacia la parte superior.

Después de seguir los pasos anteriores, inicie su proyecto usando el siguiente comando.

ng serve --open

aplicación.módulo.ts:

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 { }

aplicación.componente.ts:

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)
        });
    }
}

aplicación.componente.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>

Producción: