Scroll from element to an another component's element

Question

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?

Answer 1

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>