Faites défiler jusqu'à l'élément en cliquant dans Angular 4

Je veux pouvoir faire défiler jusqu'à une cible lorsqu'un bouton est enfoncé. Je pensais à quelque chose comme ça.

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

Et dans ma component.tsméthode comme.

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

Je sais que le code ci-dessus n'est pas valide mais juste pour montrer ce que 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

Vous pouvez le faire comme ceci:

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

puis dans votre composant:

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

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

Il existe en fait un moyen purement javascript pour y parvenir sans utiliser setTimeoutou requestAnimationFrameou jQuery.

En bref, recherchez l'élément dans le scrollView vers lequel vous souhaitez faire défiler et utilisez scrollIntoView.

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

Voici un plunkr .

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>

ajoutez cette fonction au composant.

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

Dans Angular 7 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'});
  }

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

Parce que je voulais revenir à l'en-tête 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 et passé dans `` en-tête '' ou `` pied de page '' si nécessaire. n'oubliez pas de donner aux déclarations des composants les noms de classe utilisés:

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

Une autre façon de le faire dans Angular:

Balisage:

<textarea #inputMessage></textarea>

Ajouter une ViewChild()propriété:

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Faites défiler n'importe où dans le composant à l'aide de la scrollIntoView()fonction:

this.inputMessageRef.nativeElement.scrollIntoView();

Vous pouvez faire défiler jusqu'à n'importe quelle référence d'élément sur votre vue en utilisant le bloc de code ci-dessous. Notez que la cible (elementref id ) peut se trouver sur n'importe quelle balise HTML valide.

Sur la vue (fichier html)

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

  

sur le .tsdossier,

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

Vous pouvez y parvenir en utilisant la référence à un élément DOM angulaire comme suit:

Voici l'exemple dans stackblitz

le modèle de composant:

<div class="other-content">
      Other content
      <button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
        Click to scroll
      </button>
    </div>
    <div id="content" #element>
      Some text to scroll
</div>

Dans Angular, vous pouvez utiliser ViewChildet ElementRef: donner à votre élément HTML une référence

<div #myDiv > 

et à l'intérieur de votre composant:

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

vous pouvez utiliser this.myDivRef.nativeElementpour accéder à votre élément

J'ai fait quelque chose comme ce que vous demandez simplement en utilisant jQuery pour trouver l'élément (tel que document.getElementById(...)) et en utilisant l' .focus()appel.

Vous pouvez le faire en utilisant jquery:

code ts:

    scrollTOElement = (element, offsetParam?, speedParam?) => {
    const toElement = $(element);
    const focusElement = $(element);
    const offset = offsetParam * 1 || 200;
    const speed = speedParam * 1 || 500;
    $('html, body').animate({
      scrollTop: toElement.offset().top + offset
    }, speed);
    if (focusElement) {
      $(focusElement).focus();
    }
  }

Code HTML :

<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>

Appliquez ceci sur les éléments que vous souhaitez faire défiler:

<div id="elementTo">some content</div>

Voici un exemple de stackblitz.