Przewiń do elementu po kliknięciu w Angular 4

Chcę mieć możliwość przewijania do celu po naciśnięciu przycisku. Myślałem o czymś takim.

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

A w mojej component.tsmetodzie jak.

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

Wiem, że powyższy kod nie jest prawidłowy, ale tylko po to, aby pokazać, o czym myślę. Właśnie zacząłem uczyć się Angular 4 bez wcześniejszego doświadczenia z Angular. Szukałem czegoś takiego, ale wszystkie przykłady znajdują się w AngularJs, który znacznie różni się od Angular 4

Możesz to zrobić tak:

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

a następnie w swoim komponencie:

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

Edycja: Widzę komentarze stwierdzające, że to już nie działa, ponieważ element jest niezdefiniowany. Stworzyłem przykład StackBlitz w Angular 7 i nadal działa. Czy ktoś może podać przykład, gdzie to nie działa?

Oto jak to zrobiłem, używając Angular 4.

Szablon

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

dodaj tę funkcję do komponentu.

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

W rzeczywistości istnieje sposób na osiągnięcie tego w czystym javascript bez użycia setTimeoutlub requestAnimationFramelub jQuery.

Krótko mówiąc, znajdź element w scrollView, do którego chcesz przewinąć, i użyj scrollIntoView.

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

Oto plunkr .

W Angular 7 działa idealnie

HTML

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

W komponencie

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

Jon ma właściwą odpowiedź i to działa w moich projektach Angular 5 i 6.

Gdybym chciał kliknąć, aby płynnie przewijać od paska nawigacyjnego do stopki:

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

Ponieważ chciałem przewinąć z powrotem do nagłówka ze stopki, utworzyłem usługę, w której znajduje się ta funkcja, i wstrzyknąłem ją do komponentów nawigacyjnych i stopki i przekazałem w razie potrzeby w nagłówku lub stopce. pamiętaj tylko, aby faktycznie nadać deklaracjom komponentów używane nazwy klas:

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

Inny sposób na zrobienie tego w Angular:

Narzut:

<textarea #inputMessage></textarea>

Dodaj ViewChild()nieruchomość:

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Przewiń w dowolne miejsce wewnątrz komponentu za pomocą scrollIntoView()funkcji:

this.inputMessageRef.nativeElement.scrollIntoView();

Możesz przewinąć do dowolnego elementu w swoim widoku, używając bloku kodu poniżej. Zauważ, że cel (id elementuref ) może znajdować się na dowolnym prawidłowym tagu HTML.

W widoku (plik html)

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

  

w .tsaktach,

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

Możesz to osiągnąć, używając odniesienia do kątowego elementu DOM w następujący sposób:

Oto przykład w stackblitz

szablon komponentu:

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

W Angular możesz użyć ViewChildi ElementRef: nadaj elementowi HTML ref

<div #myDiv > 

i wewnątrz twojego komponentu:

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

możesz użyć, this.myDivRef.nativeElementaby dostać się do swojego żywiołu

Zrobiłem coś takiego, o co prosisz, używając jQuery do znalezienia elementu (na przykład document.getElementById(...)) i używając .focus()wywołania.

Możesz to zrobić za pomocą jquery:

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

Kod HTML :

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

Zastosuj to do elementów, które chcesz przewijać:

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

Oto próbka stackblitz.