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