Cómo manejar el scroll al navegar en Angular 18

Cuando trabajamos con aplicaciones de una sola página (SPA), un problema recurrente es que al cambiar de ruta, el scroll de la página no se reinicia al inicio de manera automática.

Esto puede dar la impresión de que la navegación no ha ocurrido, especialmente cuando la nueva página no tiene contenido visible en la posición actual del scroll. En versiones previas de Angular, lo podíamos solucionar configurando el `RouterModule` con ciertas opciones. Sin embargo, con **Angular 18**, este enfoque ha cambiado.

Método actual (Angular 18)

En Angular 18, el concepto de configuración del enrutador ha cambiado con el nuevo sistema de configuración modular, y ahora estas opciones se manejan a través de las funciones withInMemoryScrolling y scrollPositionRestoration

app.config.ts

import { provideRouter, withInMemoryScrolling } from "@angular/router";
import { routes } from "./app.routes";

export const appConfig = {
	providers: [
		provideRouter(
			routes,
			withInMemoryScrolling({
				scrollPositionRestoration: "enabled", // Restaurar el scroll al inicio
			})
		),
	],
};

¿Qué hace exactamente withInMemoryScrolling?

La función withInMemoryScrolling permite habilitar y configurar la restauración del scroll. En este caso:

• scrollPositionRestoration: 'enabled': Al navegar a una nueva ruta, el scroll de la página se restablece al inicio automáticamente.
• (Opcional) anchorScrolling: 'enabled': Permite desplazarse automáticamente a un elemento con un id específico si la URL incluye un fragmento (por ejemplo, example.com/page#section).

El nuevo enfoque en Angular 18 puede parecer un poco diferente al principio, pero sigue siendo intuitivo y ofrece más flexibilidad.