Angular 5 Faire défiler vers le haut à chaque clic sur la route

Question

J'utilise angular 5. J'ai un tableau de bord où j'ai quelques sections avec un petit contenu et quelques sections avec un contenu si grand que je suis confronté à un problème lors du changement de routeur en allant vers le haut. Chaque fois que je dois faire défiler pour aller en haut. Quelqu'un peut-il m'aider à résoudre ce problème de sorte que lorsque je change de routeur, ma vue reste toujours en haut.

Merci d'avance.

Answer 1

Il existe quelques solutions, assurez-vous de les vérifier toutes :)

---

La prise du routeur émettra le activate à chaque fois qu'un nouveau composant est instancié, nous pourrions donc utiliser l'événement (activate) pour faire défiler (par exemple) vers le haut :

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)
    ...
}

Utilisez, par exemple, cette solution pour un défilement en douceur :

    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 vous souhaitez être sélectif, c'est-à-dire que tous les composants ne doivent pas déclencher le défilement, vous pouvez le vérifier dans un fichier de type if une déclaration comme celle-ci :

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

---

Depuis Angular6.1, nous pouvons également utiliser { scrollPositionRestoration: 'enabled' } sur les modules chargés rapidement et elle sera appliquée à toutes les routes :

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

Il fera également le défilement lisse, déjà. Cependant, cela présente l'inconvénient de le faire sur chaque itinéraire.

---

Une autre solution est de faire le défilement du haut sur une animation de routeur. Ajoutez ceci dans chaque transition où vous voulez faire défiler le haut :

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

Answer 2

Si vous rencontrez ce problème dans Angular 6, vous pouvez le résoudre en ajoutant le paramètre scrollPositionRestoration: 'enabled' au RouterModule de app-routing.module.ts :

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

Answer 3

EDITAR: Pour Angular 6+, veuillez utiliser la réponse de Nimesh Nishara Indimagedara mentionnant :

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

---

Réponse originale :

Si tout échoue, créez un élément HTML vide (par exemple, un div) en haut (ou à l'endroit où vous souhaitez faire défiler les pages) avec id="top" sur le modèle (ou le modèle parent) :

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

Et en composant :

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

Answer 4

Il existe désormais une solution intégrée disponible dans Angular 6.1 avec scrollPositionRestoration option.

Voir ma réponse sur Angular 2 Défilement vers le haut en cas de changement de route .

Answer 5

Bien que @Vega fournisse la réponse directe à votre question, il y a des problèmes. Le bouton retour/avance du navigateur est cassé. Si votre utilisateur clique sur le bouton "Précédent" ou "Suivant" du navigateur, il perd sa place et se retrouve en haut de la page. Cela peut être un peu pénible pour vos utilisateurs s'ils ont dû faire défiler la page vers le bas pour atteindre un lien et qu'ils décident de cliquer en arrière pour découvrir que la barre de défilement a été remise en haut.

Voici ma solution au problème.

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