Estoy usando angular 5. Tengo un tablero en el que 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 a la parte superior. Cada vez que necesito desplazarme para ir al principio. ¿Alguien puede ayudarme a resolver este problema para que cuando cambie el enrutador mi vista siempre permanezca en la parte superior?

Gracias por adelantado.

Hay algunas soluciones, asegúrese de revisarlas todas :)

La salida del enrutador emitirá el activateevento cada vez que se cree una instancia de un nuevo componente, por lo que podríamos usar (activate)para desplazarnos (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)
    ...
}

Utilice, por ejemplo, esta solución para un desplazamiento suave:

    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, digamos que no todos los componentes deben activar el desplazamiento, puede verificarlo en una ifdeclaración como esta:

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

Desde Angular6.1, también podemos usar { scrollPositionRestoration: 'enabled' }en módulos cargados con entusiasmo y se aplicará a todas las rutas:

RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })

También hará el desplazamiento suave, ya. Sin embargo, esto tiene el inconveniente de hacerlo en todas las rutas.

Otra solución es hacer el desplazamiento superior en la animación del enrutador. Agregue esto en cada transición donde desee desplazarse hacia la parte superior:

query(':enter, :leave', style({ position: 'fixed' }), { optional: true }) 

Si enfrenta este problema en Angular 6, puede solucionarlo agregando el parámetro scrollPositionRestoration: 'enabled'al RouterModule de app-routing.module.ts:

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})

EDITAR: Para Angular 6+, use la respuesta de Nimesh Nishara Indimagedara mencionando:

RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'
});

Respuesta original:

Si todo falla, cree algún elemento HTML vacío (por ejemplo: div) en la parte superior (o el desplazamiento deseado a la ubicación) 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;
    }
  }

Ahora hay una solución integrada disponible en Angular 6.1 con scrollPositionRestorationopción.

Vea mi respuesta en Angular 2 Desplácese hacia arriba en Cambio de ruta .

Aunque @Vega proporciona la respuesta directa a su pregunta, existen problemas. Rompe el botón de avance / retroceso del navegador. Si su usuario hace clic en el botón de avance o retroceso del navegador, pierde su lugar y se desplaza hacia la parte superior. Esto puede ser un poco molesto para sus usuarios si tuvieran que desplazarse hacia abajo para llegar a un enlace y decidieran hacer clic hacia atrás solo para encontrar que la barra de desplazamiento se había restablecido a 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;
      }
    });
  }
}

En mi caso acabo de agregar

window.scroll(0,0);

en ngOnInit()y su funcionamiento muy bien.

Desde la versión angular 6+ No es necesario usar window.scroll (0,0)

Para la versión angular 6+de @ Representa opciones para configurar el enrutador.docs

interface ExtraOptions {
  enableTracing?: boolean
  useHash?: boolean
  initialNavigation?: InitialNavigation
  errorHandler?: ErrorHandler
  preloadingStrategy?: any
  onSameUrlNavigation?: 'reload' | 'ignore'
  scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'
  anchorScrolling?: 'disabled' | 'enabled'
  scrollOffset?: [number, number] | (() => [number, number])
  paramsInheritanceStrategy?: 'emptyOnly' | 'always'
  malformedUriErrorHandler?: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree
  urlUpdateStrategy?: 'deferred' | 'eager'
  relativeLinkResolution?: 'legacy' | 'corrected'
}

Uno puede usar scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'en

Ejemplo:

RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'|'top' 
});

Y si uno requiere controlar manualmente el desplazamiento, no es necesario usar window.scroll(0,0) el paquete común en lugar de Angular V6 ViewPortScoller.

abstract class ViewportScroller {
  static ngInjectableDef: defineInjectable({ providedIn: 'root', factory: () => new BrowserViewportScroller(inject(DOCUMENT), window) })
  abstract setOffset(offset: [number, number] | (() => [number, number])): void
  abstract getScrollPosition(): [number, number]
  abstract scrollToPosition(position: [number, number]): void
  abstract scrollToAnchor(anchor: string): void
  abstract setHistoryScrollRestoration(scrollRestoration: 'auto' | 'manual'): void
}

El uso es bastante sencillo Ejemplo:

import { Router } from '@angular/router';
import {  ViewportScroller } from '@angular/common'; //import
export class RouteService {

  private applicationInitialRoutes: Routes;
  constructor(
    private router: Router;
    private viewPortScroller: ViewportScroller//inject
  )
  {
   this.router.events.pipe(
            filter(event => event instanceof NavigationEnd))
            .subscribe(() => this.viewPortScroller.scrollToPosition([0, 0]));
}

Si usa mat-sidenav, dé una identificación a la salida del enrutador (si tiene salidas de enrutador para padres e hijos) y use la función de activación <router-outlet id="main-content" (activate)="onActivate($event)"> y use este selector de consultas 'mat-sidenav-content' para desplazarse hacia arriba onActivate(event) { document.querySelector("mat-sidenav-content").scrollTo(0, 0); }

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 de retroceso.

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 la publicación original de zurfyx

Solo necesita crear una función que contenga el ajuste del desplazamiento de su pantalla

por ejemplo

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

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

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

En cada componente:

export class MyComponent implements OnInit {

firstLoad: boolean = true;

...

ngOnInit() {

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

Angular 6.1 y posterior:

Puede usar una solución integrada disponible en Angular 6.1+ con la opción scrollPositionRestoration: 'enabled'de lograr lo mismo.

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})

Angular 6.0 y versiones anteriores:

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

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
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);
            }
        });
    }
}

Nota: El comportamiento esperado es que cuando navega de regreso a la página, debe permanecer desplazada hacia abajo hasta la misma ubicación que estaba cuando hizo clic en el enlace, pero desplazándose hacia la parte superior al llegar a cada página.

solo agrega

window.scrollTo({ top: 0);

para ngOnInit ()

Para alguien que está buscando la función de desplazamiento, simplemente agregue la función y llame cuando sea necesario

scrollbarTop(){

  window.scroll(0,0);
}

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();
    }
}

Componente: suscríbase a todos los eventos de enrutamiento en lugar de crear una acción en la plantilla y desplácese en NavigationEnd b / c; de lo contrario, lo activará en navegaciones incorrectas o rutas bloqueadas, etc. Esta es una forma segura de saber si se navega correctamente a una ruta, luego calme el desplazamiento. De lo contrario, no haga nada.

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

  router$: Subscription;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router$ = this.router.events.subscribe(next => this.onRouteUpdated(next));
  }

  ngOnDestroy() {
    if (this.router$ != null) {
      this.router$.unsubscribe();
    }
  }

  private onRouteUpdated(event: any): void {
    if (event instanceof NavigationEnd) {
      this.smoothScrollTop();
    }
  }

  private smoothScrollTop(): void {
    const scrollToTop = window.setInterval(() => {
      const pos: number = window.pageYOffset;
      if (pos > 0) {
          window.scrollTo(0, pos - 20); // how far to scroll on each step
      } else {
          window.clearInterval(scrollToTop);
      }
    }, 16);
  }

}

HTML

<router-outlet></router-outlet>

prueba esto

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'top'
  })],
  exports: [RouterModule]
})

este código soporta angular 6 <=