Gulir ke elemen saat diklik di Angular 4

Saya ingin dapat menggulir ke target saat tombol ditekan. Saya sedang memikirkan sesuatu seperti ini.

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

Dan dalam component.tsmetode saya seperti.

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

Saya tahu bahwa kode di atas tidak valid tetapi hanya untuk menunjukkan apa yang saya pikirkan. Saya baru saja mulai mempelajari Angular 4 tanpa pengalaman sebelumnya tentang Angular. Saya telah mencari-cari sesuatu seperti ini tetapi semua contoh ada di AngularJs yang sangat berbeda dengan Angular 4

Anda bisa melakukannya seperti ini:

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

lalu di komponen Anda:

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

Edit: Saya melihat komentar yang menyatakan bahwa ini tidak lagi berfungsi karena elemen tidak ditentukan. Saya membuat contoh StackBlitz di Angular 7 dan masih berfungsi. Bisakah seseorang memberikan contoh di mana itu tidak berfungsi?

Sebenarnya ada cara javascript murni untuk mencapai ini tanpa menggunakan setTimeoutatau requestAnimationFrameatau jQuery.

Singkatnya, temukan elemen di scrollView yang ingin Anda gulir, dan gunakan scrollIntoView.

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

Ini plunkr .

Inilah cara saya melakukannya menggunakan Angular 4.

Template

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

tambahkan fungsi ini ke Komponen.

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

Di Angular 7 bekerja dengan sempurna

HTML

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

Dalam komponen

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

Jon memiliki jawaban yang benar dan ini berfungsi di proyek sudut 5 dan 6 saya.

Jika saya ingin mengklik untuk menggulir dengan lancar dari navbar ke footer:

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

Karena saya ingin menggulir kembali ke header dari footer, saya membuat layanan tempat fungsi ini berada dan memasukkannya ke dalam komponen navbar dan footer dan meneruskannya ke 'header' atau 'footer' jika diperlukan. ingatlah untuk benar-benar memberikan deklarasi komponen nama kelas yang digunakan:

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

Cara lain untuk melakukannya di Angular:

Markup:

<textarea #inputMessage></textarea>

Tambahkan ViewChild()properti:

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Gulir ke mana pun Anda inginkan di dalam komponen menggunakan scrollIntoView()fungsi:

this.inputMessageRef.nativeElement.scrollIntoView();

Anda dapat menggulir ke elemen apapun ref pada tampilan Anda dengan menggunakan blok kode di bawah ini. Perhatikan bahwa target (elementref id ) bisa berada di tag html yang valid.

Di tampilan (file html)

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

  

di .tsfile,

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

Anda dapat mencapainya dengan menggunakan referensi ke elemen DOM sudut sebagai berikut:

Berikut adalah contoh di stackblitz

template komponen:

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

Dalam Angular Anda dapat menggunakan ViewChilddan ElementRef: memberikan elemen HTML Anda referensi

<div #myDiv > 

dan di dalam komponen Anda:

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

dapat Anda gunakan this.myDivRef.nativeElementuntuk mendapatkan elemen Anda

Saya telah melakukan sesuatu seperti yang Anda minta hanya dengan menggunakan jQuery untuk menemukan elemen (seperti document.getElementById(...)) dan menggunakan .focus()panggilan.

Anda dapat melakukan ini dengan menggunakan jquery:

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

kode html:

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

Terapkan ini pada elemen yang ingin Anda gulir:

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

Berikut adalah contoh stackblitz.