change - Angular 5 Desplácese hacia arriba en cada clic de ruta

router events angular 6

Question

Estoy usando angular 5. Tengo un panel de control donde tengo pocas secciones con contenido pequeño y pocas secciones con contenido tan grande que me enfrento a un problema al cambiar el enrutador mientras voy arriba. Cada vez que necesito desplazarme para ir arriba. ¿Alguien puede ayudarme a resolver este problema para que cuando cambie el enrutador mi vista permanezca siempre en la parte superior?

Gracias por adelantado.

Answer 1

Ahora hay una solución integrada disponible en Angular 6.1 con la opción scrollPositionRestoration .

Ver mi respuesta en Angular 2 Desplazarse hacia arriba en Cambio de ruta .

Answer 2

Aquí hay una solución que solo se desplaza a la parte superior del Componente si visita por primera vez CADA componente (en caso de que necesite hacer algo diferente para cada componente):

En cada componente:

export class MyComponent implements OnInit {

firstLoad: boolean = true;

...

ngOnInit() {

  if(this.firstLoad) {
    window.scroll(0,0);
    this.firstLoad = false;
  }
  ...
}

Answer 3

Aunque @Vega proporciona la respuesta directa a su pregunta, hay problemas. Se rompe el botón de avance / retroceso del navegador. Si el usuario hace clic en el botón de avance o retroceso del navegador, pierde su lugar y se desplaza en la parte superior. Esto puede ser un poco molesto para los usuarios si tuvieron que desplazarse hacia abajo para llegar a un enlace y decidieron hacer clic en atrás solo para encontrar que la barra de desplazamiento se había restablecido en la parte superior.

Aquí está mi solución al problema.

export class AppComponent implements OnInit {
  isPopState = false;

  constructor(private router: Router, private locStrat: LocationStrategy) { }

  ngOnInit(): void {
    this.locStrat.onPopState(() => {
      this.isPopState = true;
    });

    this.router.events.subscribe(event => {
      // Scroll to top if accessing a page, not via browser history stack
      if (event instanceof NavigationEnd && !this.isPopState) {
        window.scrollTo(0, 0);
        this.isPopState = false;
      }

      // Ensures that isPopState is reset
      if (event instanceof NavigationEnd) {
        this.isPopState = false;
      }
    });
  }
}

Answer 4

En mi caso acabo de añadir

window.scroll(0,0);

en ngOnInit() y está funcionando bien.

Answer 5

Prueba esto:

app.component.ts

import {Component, OnInit, OnDestroy} from ''@angular/core'';
import {Router, NavigationEnd} from ''@angular/router'';
import {filter} from ''rxjs/operators'';
import {Subscription} from ''rxjs'';

@Component({
    selector: ''app-root'',
    templateUrl: ''./app.component.html'',
    styleUrls: [''./app.component.scss''],
})
export class AppComponent implements OnInit, OnDestroy {
    subscription: Subscription;

    constructor(private router: Router) {
    }

    ngOnInit() {
        this.subscription = this.router.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe(() => window.scrollTo(0, 0));
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

Answer 6

Si todo falla, cree un elemento HTML vacío (por ejemplo, div) en la parte superior (o en la ubicación deseada) con id = "top" en la plantilla (o plantilla principal):

<div id="top"></div>

Y en componente:

  ngAfterViewInit() {
    // Hack: Scrolls to top of Page after page view initialized
    let top = document.getElementById(''top'');
    if (top !== null) {
      top.scrollIntoView();
      top = null;
    }
  }

Answer 7

Sigo buscando una solución integrada para este problema como la que hay en AngularJS. Pero hasta entonces, esta solución funciona para mí, es simple y conserva la funcionalidad del botón Atrás.

app.component.html

<router-outlet (deactivate)="onDeactivate()"></router-outlet>

app.component.ts

onDeactivate() {
  document.body.scrollTop = 0;
  // Alternatively, you can scroll to top by using this other call:
  // window.scrollTo(0, 0)
}

Respuesta de zurfyx original post.

Answer 8

Solo necesita crear una función que contenga ajustes de desplazamiento de su pantalla

por ejemplo

window.scroll(0,0) OR window.scrollTo() by passing appropriate parameter.

window.scrollTo (xpos, ypos) -> parámetro esperado.

Answer 9

Una salida del enrutador emitirá un evento de activación cada vez que se instale un nuevo componente, por lo que el evento (activate) podría ser desplazarse (por ejemplo) hacia la parte superior:

app.component.html

<router-outlet (activate)="onActivate($event)" ></router-outlet>

app.component.ts

onActivate(event) {
    window.scroll(0,0);
    //or document.body.scrollTop = 0;
    //or document.querySelector(''body'').scrollTo(0,0)
    ...
}

o usando esta respuesta para desplazarse suavemente

    onActivate(event) {
        let scrollToTop = window.setInterval(() => {
            let pos = window.pageYOffset;
            if (pos > 0) {
                window.scrollTo(0, pos - 20); // how far to scroll on each step
            } else {
                window.clearInterval(scrollToTop);
            }
        }, 16);
    }

Si desea ser selectivo, diga que no todos los componentes deben activar el desplazamiento, puede verificarlo:

onActivate(e) {
    if (e.constructor.name)==="login"{ // for example
            window.scroll(0,0);
    }
}