Как я могу позволить странице прокручиваться до указанного c слова в более длинном тексте

Question

У меня длинный текст, и я хочу (если я выберу слово раньше) страницу для автоматической прокрутки до этого элемента после нажатия кнопки. Текст, в котором находится слово, намного длиннее этого, я просто хотел продемонстрировать свою проблему.

<div (click)="scrollto()">scroll to word</div>
<div id="text">lsja dflkasjdf laksj dflkasj scrollhere saldfj asljfals dfalsjölas dfasjd fajsdlfa jsdldsa fasl falsd flasf</div>

.ts файл:

scrollto() {
  const word = 'scrollhere';

что мне нужно написать в коде Typescript, чтобы страница прокручивалась до слова «прокрутка отсюда»?

Answer 1

Один из способов сделать это - обернуть слово, к которому вы хотите прокрутить, в span или другой элемент semanti c, чтобы вы могли ссылаться на него в файле .ts. Примерно так:

<span #scrollHere>scrollhere</span>

А потом в твои .ts

@ViewChild('scrollHere', { static: true }) scrollHere;


scrollTo() {
  this.scrollHere.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
}