Angular 17 standalone link for the other section of the page on the same page

Question

this is where I defined the link

<div class="form-column">
            <a href="#" (click)="scrollTo('form-container')" class="heading"
              >Book a Clarity Call</a
            >
          </div>

this is where I defined the id <div class="post-card-container" id="form-container">

following is my function inside the component

import { Cimport { Component, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
  selector: 'app-contact-us',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './contact-us.component.html',
  styleUrl: './contact-us.component.scss',
})
export class ContactUsComponent {
constructor(private elementRef: ElementRef) {}
scrollTo(elementId: string): void {
    const element = document.getElementById(elementId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
}

I tried making one section of my components templet to work as link, on clicking which it must take me to the section of the template where the id is, but is not working.