How to scroll to bottom on click in angular

Question

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>

Answer 1

You can do it like this:

showService() {
  let position = document.getElementById("serviceBox").getBoundingClientRect().top + window.scrollY - 25;
  window.scrollTo({ top: position, behavior: 'smooth' });
}