Angular 2 Scroll to top on Route Change: solução para iniciantes

Angular 2 Scroll to top on Route Change: por que é importante e como implementar

Imagine que você está rolando uma longa página de documentação, chega ao meio, clica em um link — e se encontra no final de uma nova seção. Familiar? É exatamente esse problema que a mecânica Angular 2 scroll to top on route change resolve. Sem ela, a experiência do usuário é prejudicada: é necessário rolar manualmente com o mouse ou pressionar Home, o que irrita e aumenta a taxa de rejeição.

Neste artigo, vamos analisar como fazer o Angular rolar automaticamente a página para o topo a cada transição entre rotas. Você aprenderá não apenas a solução pronta, mas também entenderá por que ela funciona dessa forma. O artigo é escrito para iniciantes, mas também será útil para desenvolvedores experientes que desejam revisar o conhecimento.

Por que o Angular não faz isso "de fábrica"?

Angular é um poderoso framework SPA, mas seu comportamento durante a navegação pode surpreender. Por padrão, ao mudar de rota, o navegador não redefine a posição da rolagem. Por quê? Porque o Angular Router trata a transição como uma substituição do componente em <router-outlet>, e não como o carregamento de uma nova página. O navegador pensa: "Ainda estou no mesmo documento, por que eu rolaria?".

Isso é especialmente perceptível se você tem listas longas, tabelas ou documentação. O usuário clica em um link no final da página — e o novo conteúdo é aberto, mas a rolagem permanece no final. A solução para esse problema é indicar explicitamente ao Angular: "Ei, a cada transição, role para o topo!".

Duas abordagens para a solução

Existem duas maneiras principais de implementar o scroll to top on route change no Angular 2+:

\n
• Manipulador global no AppComponent — simples, mas nem sempre funciona corretamente com rotas aninhadas.
\n
• Uso da Route Config — mais flexível, permite configurar o comportamento para cada rota individualmente.
\n

Vamos analisar ambas, mas recomendo focar na segunda — ela oferece mais controle.

Método 1: Manipulador global simples (para início rápido)

Abra seu app.component.ts (ou componente raiz) e adicione uma inscrição nos eventos do Router. Código em 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

Aqui, nos inscrevemos nos eventos do roteador, filtramos apenas NavigationEnd (momento em que a transição é concluída) e chamamos window.scrollTo(0, 0). Simples, mas há um detalhe: se você tiver rotas aninhadas (por exemplo, rotas filhas dentro de um componente), esse código pode disparar muito cedo ou não disparar.

Método 2: Solução correta usando Route Config (recomendado)

Esta abordagem utiliza a opção embutida scrollPositionRestoration no Angular Router. A partir do Angular 6.1, é possível configurar a restauração/redefinição automática da rolagem diretamente na configuração de roteamento.

Abra seu app-routing.module.ts e adicione a opção scrollPositionRestoration: 'top' no 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