Faites défiler jusqu'à element on cliquez dans Angular 4

Je veux être en mesure de 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 mon élément.ts de la méthode.

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 Angulaire 4 avec aucune expérience préalable Angulaire. J'ai été la recherche autour de quelque chose comme ça, mais tous les exemples sont en AngularJs qui diffère beaucoup Angulaire 4

source d'informationauteur

  1. 46

    Vous pourriez le faire comme ceci:

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

    et puis dans votre composante:

    scroll(el) {
    el.scrollIntoView();
}
  2. 11

    Peu tard pour cette partie, mais j'ai écrit un plugin pour Angulaires 4+ qui fait juste cela. Il couvre les autres questions que vous pourriez tomber sur, comme le Rendu Côté Serveur. Vous pouvez également animer le défilement de vos goûts. La divulgation complète, je suis l'auteur.

    NPM: @nicky-lenaers/ngx-faites défiler jusqu'à

    GitHub: @nicky-lenaers/ngx-faites défiler jusqu'à

    Espère que cela vous aide!

  3. 11

    Il est en fait un pur javascript façon d'y parvenir sans l'aide de setTimeout ou requestAnimationFrame ou jQuery.

    En bref, trouver l'élément dans la scrollView que vous voulez faire défiler et à l'utilisation scrollIntoView.

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

    Ici est un plunkr.

  4. 4

    voici comment je l'ai fait à l'aide angulaire 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 à la Composante.

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

    Jon a le droit de répondre et cela fonctionne dans mon angulaire 5 et 6 projets.

    Si je voulais cliquez pour faire défiler en continu à partir de barre de navigation en bas 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 en arrière pour la tête, le pied de page, j'ai créé un service que cette fonction se trouve dans et injecté dans la barre de navigation et le pied de page de composants et de passé en "en-tête" ou "pied de page" où nécessaire. n'oubliez pas de donner le composant déclarations de la classe des noms utilisés:

    <app-footer class="footer"></app-footer>
  6. -1

    Vous pouvez le faire en utilisant jquery :

    ts code :

        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>

    Appliquer ce sur les éléments que vous voulez faire défiler :

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

    Ici est un stackblitz de l'échantillon.

  7. -7

    J'ai fait quelque chose comme ce que vous êtes en posant simplement par l'utilisation de jQuery pour trouver l'élément (par exemple, document.getElementById(...)) et en utilisant le .focus() de l'appel.