从元素滚动到另一个组件的元素

Question

这个问题困扰我好几天了，我一直想不通（我在 Angular 中也很新）。我的目标是在这样的组件中拥有一个元素。让我们称之为 A 元素:

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

函数：

  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 元素？目前代码不起作用，因为在函数中 id 为空。你能帮帮我吗？

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>

从元素滚动到另一个组件的元素

Scroll from element to an another component's element

javascript

scroll

typescript

angular