I want to scroll to bottom on clicking, I tried using scrollIntoView, it is scrolling till half of the page not till section of div
.ts file
@ViewChild("serviceBox", {static: false}) private serviceBox: ElementRef;
showService() {
setTimeout(() => {
this.serviceBox.nativeElement.scrollIntoView({behavior: 'smooth'})
});
}
.HTML
<div class="row" [style.display]="commonService.showService ? 'block' : 'none'">
<div class="col-md-12">
<div class="ticket__box" #serviceBox>
<app-service-details [contractId]="contractId" [contactId]="contactId" [memberID]="memberID" [serviceId]="commonService.serviceId"></app-service-details>
</div>
</div>
</div>
You can do it like this:
showService() {
let position = document.getElementById("serviceBox").getBoundingClientRect().top + window.scrollY - 25;
window.scrollTo({ top: position, behavior: 'smooth' });
}