Scorri fino all'elemento facendo clic in Angular 4

Voglio essere in grado di scorrere fino a una destinazione quando viene premuto un pulsante. Stavo pensando qualcosa del genere.

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

E nel mio component.tsun metodo simile.

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

So che il codice sopra non è valido ma solo per mostrare cosa stavo pensando. Ho appena iniziato a imparare Angular 4 senza alcuna precedente esperienza di Angular. Ho cercato qualcosa del genere, ma tutti gli esempi sono in AngularJs che differisce molto da Angular 4

Potresti farlo in questo modo:

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

e poi nel tuo componente:

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

Modifica: vedo commenti che affermano che questo non funziona più perché l'elemento non è definito. Ho creato un esempio StackBlitz in Angular 7 e funziona ancora. Qualcuno può fornire un esempio in cui non funziona?

In realtà esiste un modo javascript puro per farlo senza utilizzare setTimeoutor requestAnimationFrameor jQuery.

In breve, trova l'elemento in scrollView che desideri scorrere e usa scrollIntoView.

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

Ecco un plunkr .

Ecco come l'ho fatto usando Angular 4.

Modello

<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>

aggiungere questa funzione al componente.

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

In Angular 7 funziona perfettamente

HTML

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

In componente

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

Jon ha la risposta giusta e questo funziona nei miei progetti angolari 5 e 6.

Se volessi fare clic per scorrere senza problemi dalla barra di navigazione al piè di pagina:

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

Poiché volevo tornare all'intestazione dal piè di pagina, ho creato un servizio in cui si trova questa funzione e l'ho inserito nei componenti della barra di navigazione e del piè di pagina e passato in "intestazione" o "piè di pagina" dove necessario. ricorda solo di dare effettivamente alle dichiarazioni dei componenti i nomi delle classi utilizzate:

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

Un altro modo per farlo in Angular:

Markup:

<textarea #inputMessage></textarea>

Aggiungi ViewChild()proprietà:

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Scorri dove vuoi all'interno del componente usando la scrollIntoView()funzione:

this.inputMessageRef.nativeElement.scrollIntoView();

Puoi scorrere fino a qualsiasi elemento di riferimento nella tua vista utilizzando il blocco di codice di seguito. Nota che il target (elementref id ) potrebbe essere su qualsiasi tag html valido.

Nella vista (file html)

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

  

sul .tsfile,

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

Puoi ottenerlo utilizzando il riferimento a un elemento DOM angolare come segue:

Ecco l'esempio in stackblitz

il modello del componente:

<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>

In Angular puoi usare ViewChilde ElementRef: dai al tuo elemento HTML un riferimento

<div #myDiv > 

e all'interno del tuo componente:

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

puoi usare this.myDivRef.nativeElementper arrivare al tuo elemento

Ho fatto qualcosa di simile a quello che stai chiedendo semplicemente usando jQuery per trovare l'elemento (come document.getElementById(...)) e usando la .focus()chiamata.

Puoi farlo usando jquery:

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

codice html:

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

Applicalo sugli elementi che vuoi scorrere:

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

Ecco un esempio di stackblitz.