Tengo este problema durante días y no pude resolverlo (también soy bastante nuevo en Angular). Mi objetivo sería tener un elemento en un componente como este. Vamos a llamar a este elemento A :
<button (click)="scroll('anotherComponentsElementId')">Services</button>la función:
scroll(id: string) { let el = document.getElementById(id); console.log(id); el!.scrollIntoView(); }Y luego tengo otro componente, que tiene el elemento, donde me gustaría desplazarme. Llamemos a este elemento B :
<section class="page-section" id='anotherComponentsElementId'>lets gooo</section>¿Cómo puedo desplazarme del elemento A al elemento B? Actualmente el código no funciona, porque en la función el id es nulo. ¿Serías tan amable de ayudarme?
Puede intentar agregar onclick="location.href='#elementid'" en su botón.
<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>