Estoy enfrentando un problema extraño. Estoy tratando de implementar la funcionalidad de desplazamiento hacia arriba en el cambio de ruta en Angular y he probado varios métodos. Para todos los métodos, la funcionalidad de desplazamiento hacia arriba funciona perfectamente bien cuando se prueba en mi computadora portátil, pero actúan de manera extraña cuando se abren en un dispositivo móvil/iPad.
Para algunos enlaces, se desplaza hacia la parte superior como se esperaba, pero para otros enlaces simplemente carga el componente sin desplazarse hacia la parte superior. Lo raro es que solo pasa en mi móvil/iPad. En la computadora portátil funciona completamente bien.
Implementé las siguientes soluciones para esta funcionalidad de desplazamiento a la parte superior:
Método 1:
Implementé una función scrollToTop() que estaba llamando al hacer clic en el evento en las etiquetas de anclaje con el routerLink .
scrollToTop() { window.scroll(0,0); }Y mis enlaces se veían así:
<li class="nav-item" routerLinkActive="active"> <a class="nav-link" routerLink="about" (click)="scrollToTop()">About Us</a> </li> Método 2:
Agregué la opción scrollPositionRestoration: 'enabled' en el módulo de enrutamiento de la aplicación.
RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })Los dos métodos anteriores funcionan en una computadora portátil pero no en dispositivos móviles. En caso de que sea de alguna importancia, estoy usando la carga diferida en mi aplicación y AOT durante la construcción de la aplicación. ¿Me estoy perdiendo de algo?