Scroll from element to an another component's element

Issue

I have this problem for days and I could not figure this out (also im pretty new in Angular). My goal would be to have an element in a component like this. Lets called this A element:

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

the function:

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

And then I have an another component, which has the element, where I would like to scroll. Lets call this B element:

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

How can I scroll from A element to B element? Currently the code doesnt work, because in the function the id is null. Would you be so kind to help me out?

Solution

You can try to add onclick="location.href='#elementid'" in your button.

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

Answered By - Le____