Angular 2 Scroll to top on Route Change: solución para principiantes

Angular 2 Scroll to top on Route Change: por qué es importante y cómo implementarlo

Imagine que está hojeando una página larga de documentación, llega a la mitad, hace clic en un enlace y termina al final de una nueva sección. ¿Le suena familiar? Este problema lo resuelve la mecánica de Angular 2 scroll to top on route change. Sin ella, la experiencia del usuario se ve afectada: hay que desplazarse manualmente con la rueda del ratón o presionar Inicio, lo que resulta molesto y aumenta la tasa de abandono.

En este artículo, analizaremos cómo hacer que Angular desplace automáticamente la página hacia arriba en cada transición entre rutas. No solo conocerá una solución lista para usar, sino que también entenderá por qué funciona de esta manera. El artículo está escrito para principiantes, pero también será útil para desarrolladores experimentados que deseen refrescar sus conocimientos.

¿Por qué Angular no hace esto "de fábrica"?

Angular es un potente framework SPA, pero su comportamiento durante la navegación puede sorprender. Por defecto, al cambiar de ruta, el navegador no restablece la posición del desplazamiento. ¿Por qué? Porque el Router de Angular considera la transición como un reemplazo del componente en <router-outlet>, no como la carga de una nueva página. El navegador piensa: «Todavía estoy en el mismo documento, ¿por qué debería desplazarme?».

Esto es especialmente notable si tiene listas largas, tablas o documentación. El usuario hace clic en un enlace al final de la página y el nuevo contenido se abre, pero el desplazamiento permanece al final. La solución a este problema es indicarle explícitamente a Angular: «Oye, en cada transición, ¡desplázate hacia arriba!».

Dos enfoques para la solución

Existen dos formas principales de implementar scroll to top on route change en Angular 2+:

\n
• Manejador global en AppComponent — simple, pero no siempre funciona correctamente con rutas anidadas.
\n
• Uso de la configuración de rutas (Route Config) — más flexible, permite personalizar el comportamiento para cada ruta individualmente.
\n

Analizaremos ambos, pero recomiendo optar por el segundo, ya que ofrece más control.

Método 1: Manejador global simple (para empezar rápido)

Abra su archivo app.component.ts (o el componente raíz) y añada una suscripción a los eventos del Router. Código en TypeScript:

\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

Aquí nos suscribimos a los eventos del router, filtramos solo NavigationEnd (el momento en que la transición se completa) y llamamos a window.scrollTo(0, 0). Simple, pero hay un detalle: si tiene rutas anidadas (por ejemplo, rutas hijas dentro de un componente), este código puede ejecutarse demasiado pronto o no ejecutarse en absoluto.

Método 2: Solución correcta usando la configuración de rutas (recomendado)

Este enfoque utiliza la opción incorporada scrollPositionRestoration en el Router de Angular. A partir de Angular 6.1, es posible configurar la restauración/restablecimiento automático del desplazamiento directamente en la configuración de enrutamiento.

Abra su archivo app-routing.module.ts y añada la opción scrollPositionRestoration: 'top' en 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