從元素滾動到另一個組件的元素

Question

我有這個問題好幾天了，我無法弄清楚（我在 Angular 中也很新）。 我的目標是在這樣的組件中擁有一個元素。 讓我們稱之為A 元素：

<button (click)="scroll('anotherComponentsElementId')">Services</button>

function：

  scroll(id: string) {
    let el = document.getElementById(id);
    console.log(id);
    el!.scrollIntoView();
  }

然后我有另一個組件，它有我想滾動的元素。 讓我們稱這個B 元素：

<section class="page-section" id='anotherComponentsElementId'>lets gooo</section>

如何從 A 元素滾動到 B 元素？ 目前代碼不起作用，因為在 function 中，id 是 null。你能幫幫我嗎？

Answer 1

您可以嘗試在按鈕中添加onclick="location.href='#elementid'" 。

 <input id='top' type="button" onclick="location.href='#A'" value="go to A" /> <input type="button" onclick="location.href='#B'" value="go to B" /> <input type="button" onclick="location.href='#C'" value="go to C" /> <br><br> <section id='A' style='background:red'>section 1</section> <p>line</p> <p>line</p> <p>line</p> <p>line</p> <input type="button" onclick="location.href='#top'" value="back to top" /> <br><br> <section id='B' style='background:green'>section 2</section> <p>line</p> <p>line</p> <p>line</p> <p>line</p> <input type="button" onclick="location.href='#top'" value="back to top" /> <br><br> <section id='C' style='background:blue'>section 3</section> <p>line</p> <p>line</p> <p>line</p> <p>line</p> <input type="button" onclick="location.href='#top'" value="back to top" /> <br><br><br>