Défilement vers l'élément en cas de clic en Angular 4

Question

Je veux pouvoir faire défiler une cible lorsqu'on appuie sur un bouton. Je pensais à quelque chose comme ça.

<button (click)="scroll(#target)">Button</button>

Et dans mon component.ts une méthode comme.

scroll(element) {
    window.scrollTo(element.yPosition)
}

Je sais que le code ci-dessus n'est pas valide mais juste pour montrer ce à quoi je pensais. Je viens de commencer à apprendre Angular 4 sans aucune expérience préalable d'Angular. J'ai cherché quelque chose comme ça mais tous les exemples sont dans AngularJs qui diffère beaucoup d'Angular 4.

Answer 1

Vous pourriez le faire comme ça :

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

et ensuite dans votre composant :

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

Edit : Je vois des commentaires indiquant que cela ne fonctionne plus parce que l'élément est indéfini. J'ai créé un Exemple de StackBlitz dans Angular 7 et cela fonctionne toujours. Quelqu'un peut-il fournir un exemple où cela ne fonctionne pas ?

Answer 2

Voici comment je l'ai fait en utilisant angular 4.

Modèle

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

ajouter cette fonction au composant.

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

Answer 3

Dans angular 7, cela fonctionne parfaitement

HTML

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

Dans le composant

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
  }

Answer 4

Il existe en fait un moyen purement javascript d'accomplir ceci sans utiliser setTimeout o requestAnimationFrame ou jQuery.

En bref, trouvez l'élément de la scrollView vers lequel vous souhaitez faire défiler les pages, et utilisez la fonction scrollIntoView .

el.scrollIntoView({behavior:"smooth"});

Voici un plunkr .

Answer 5

Jon a la bonne réponse et cela fonctionne dans mes projets angulaires 5 et 6.

Si je voulais cliquer pour faire défiler en douceur de la barre de navigation au pied de page :

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

Comme je voulais revenir à l'en-tête à partir du pied de page, j'ai créé un service dans lequel se trouve cette fonction et je l'ai injecté dans les composants de la barre de navigation et du pied de page en lui passant 'header' ou 'footer' là où c'était nécessaire. N'oubliez pas de donner aux déclarations de composants les noms des classes utilisées :

<app-footer class="footer"></app-footer>