Angular 2 Desplácese hacia arriba en Cambio de ruta

Posterior a de una extensa recopilación de datos hemos podido solucionar este asunto que presentan algunos de nuestros usuarios. Te brindamos la solución y esperamos serte de gran ayuda.

Solución:

Puede registrar un oyente de cambio de ruta en su componente principal y desplazarse hacia arriba en los cambios de ruta.

import  Component, OnInit  from '@angular/core';
import  Router, NavigationEnd  from '@angular/router';

@Component(
    selector: 'my-app',
    template: '',
)
export class MyAppComponent implements OnInit 
    constructor(private router: Router)  

    ngOnInit() 
        this.router.events.subscribe((evt) => 
            if (!(evt instanceof NavigationEnd)) 
                return;
            
            window.scrollTo(0, 0)
        );
    

Angular 6.1 y posterior:

Angular 6.1 (lanzado el 25 de julio de 2018) agregó soporte incorporado para manejar este problema, a través de una función llamada “Restauración de la posición de desplazamiento del enrutador”. Como se describe en el blog oficial de Angular, solo necesita habilitar esto en la configuración del enrutador de esta manera:

RouterModule.forRoot(routes, scrollPositionRestoration: 'enabled')

Además, el blog afirma que “se espera que esto se convierta en el valor predeterminado en una versión importante futura”. Hasta ahora, esto no ha sucedido (a partir de Angular 11.0), pero eventualmente no necesitará hacer nada en su código, y esto funcionará correctamente de forma inmediata.

Puede ver más detalles sobre esta función y cómo personalizar este comportamiento en los documentos oficiales.

Angular 6.0 y anteriores:

Si bien la excelente respuesta de @GuilhermeMeireles soluciona el problema original, presenta uno nuevo al romper el comportamiento normal que espera cuando navega hacia atrás o hacia adelante (con los botones del navegador o a través de la ubicación en el código). El comportamiento esperado es que cuando navega de regreso a la página, debería permanecer desplazada hacia abajo hasta la misma ubicación que estaba cuando hizo clic en el enlace, pero desplazarse hacia arriba al llegar a cada página obviamente rompe esta expectativa.

El siguiente código amplía la lógica para detectar este tipo de navegación al suscribirse a la secuencia PopStateEvent de Location y omitir la lógica de desplazamiento hacia arriba si la página recién llegada es el resultado de dicho evento.

Si la página desde la que navega hacia atrás es lo suficientemente larga como para cubrir toda la ventana gráfica, la posición de desplazamiento se restaura automáticamente, pero como señaló correctamente @JordanNelson, si la página es más corta, debe realizar un seguimiento de la posición de desplazamiento original y restaurarla. explícitamente cuando regrese a la página. La versión actualizada del código también cubre este caso, al restaurar siempre explícitamente la posición de desplazamiento.

import  Component, OnInit  from '@angular/core';
import  Router, NavigationStart, NavigationEnd  from '@angular/router';
import  Location, PopStateEvent  from "@angular/common";

@Component(
    selector: 'my-app',
    template: '',
)
export class MyAppComponent implements OnInit 

    private lastPoppedUrl: string;
    private yScrollStack: number[] = [];

    constructor(private router: Router, private location: Location)  

    ngOnInit() 
        this.location.subscribe((ev:PopStateEvent) => 
            this.lastPoppedUrl = ev.url;
        );
        this.router.events.subscribe((ev:any) => 
            if (ev instanceof NavigationStart) 
                if (ev.url != this.lastPoppedUrl)
                    this.yScrollStack.push(window.scrollY);
             else if (ev instanceof NavigationEnd) 
                if (ev.url == this.lastPoppedUrl) 
                    this.lastPoppedUrl = undefined;
                    window.scrollTo(0, this.yScrollStack.pop());
                 else
                    window.scrollTo(0, 0);
            
        );
    

Desde Angular 6.1, ahora puede evitar las molestias y pasar extraOptions para usted RouterModule.forRoot() como segundo parámetro y puede especificar scrollPositionRestoration: enabled para decirle a Angular que se desplace hacia arriba cada vez que cambie la ruta.

De forma predeterminada, encontrará esto en app-routing.module.ts:

const routes: Routes = [
  
    path: '...'
    component: ...
  ,
  ...
];

@NgModule(
  imports: [
    RouterModule.forRoot(routes, 
      scrollPositionRestoration: 'enabled', // Add options right here
    )
  ],
  exports: [RouterModule]
)
export class AppRoutingModule  

Documentos oficiales angulares

Agradecemos que quieras estimular nuestra labor exponiendo un comentario y dejando una valoración te lo agradecemos.

---

---

Utiliza Nuestro Buscador