Прокрутіть до елемента після клацання в Angular 4

Я хочу мати можливість прокрутити до цілі при натисканні кнопки. Я думав приблизно так.

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

А в моєму component.tsтакий метод.

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

Я знаю, що наведений вище код не дійсний, а лише для того, щоб показати, про що я думав. Я щойно почав вивчати Angular 4 без попереднього досвіду роботи з Angular. Я шукав щось подібне, але всі приклади знаходяться в AngularJs, що значно відрізняється від Angular 4

Ви можете зробити це так:

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

а потім у вашому компоненті:

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

Редагувати: я бачу коментарі про те, що це більше не працює, оскільки елемент не визначений. Я створив приклад StackBlitz в Angular 7, і він все ще працює. Чи може хтось навести приклад, коли це не працює?

Насправді існує чистий спосіб JavaScript для досягнення цього без використання setTimeoutабо requestAnimationFrameабо jQuery.

Коротше кажучи, знайдіть елемент у scrollView, до якого ви хочете прокрутити та використати scrollIntoView.

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

Ось плюнкр .

Ось як я це зробив за допомогою Angular 4.

Шаблон

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

додати цю функцію до компонента.

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

У Angular 7 працює ідеально

HTML

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

В компоненті

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

Джон має правильну відповідь, і це працює в моїх кутових 5 і 6 проектах.

Якщо я хотів натиснути, щоб плавно перейти від навігаційної панелі до нижнього колонтитула:

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

Оскільки я хотів прокрутити назад до верхнього колонтитула з нижнього колонтитула, я створив службу, в якій знаходиться ця функція, і ввів її в компоненти панелі навігації та нижнього колонтитула і передав там, де потрібно, „верхній колонтитул” або „нижній колонтитул”. просто пам’ятайте, що насправді потрібно давати оголошенням компонентів використовувані імена класів:

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

Інший спосіб зробити це в Angular:

Розмітка:

<textarea #inputMessage></textarea>

Додати ViewChild()властивість:

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Прокрутіть де завгодно всередині компонента за допомогою scrollIntoView()функції:

this.inputMessageRef.nativeElement.scrollIntoView();

Ви можете перейти до будь-якого елемента ref у своєму поданні, використовуючи блок коду нижче. Зверніть увагу, що target (elementref id ) може бути на будь-якому дійсному тегу html.

У поданні (файл HTML)

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

  

на .ts файлі,

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

Ви можете досягти цього, використовуючи посилання на кутовий елемент DOM наступним чином:

Ось приклад у стек-бліці

шаблон компонента:

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

В Angular ви можете використовувати ViewChildі ElementRef: дайте елементу HTML посилання

<div #myDiv > 

і всередині вашого компонента:

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

ви можете використовувати, this.myDivRef.nativeElementщоб дістатися до вашого елемента

Я зробив щось на зразок того, що ви запитуєте, просто використовуючи jQuery для пошуку елемента (наприклад document.getElementById(...)) та використовуючи .focus()виклик.

Ви можете зробити це за допомогою jquery:

код коду:

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

html код:

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

Застосуйте це до елементів, які потрібно прокрутити:

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

Ось зразок стек-бліц.