How to make active route link scroll to center in Angular?

In Angular, I have a Navbar, in which I have scrollable menu links. The links will start from the center. What I'm trying to do is, that I want the active link to be scrolled to the center when I click on it. but I'm unable to do it. How can I achieve it? And FYI - whenever I click on links the page will reload.

Below is image -





Below is my code-

Html

<div class="menu-links-container">
<ul class="navbar-nav ms-auto me-auto mb-lg-0">
<li class="nav-item">
<a class="nav-link" routerLink="/home" routerLinkActive="active" ariaCurrentWhenActive="page"
id="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about" routerLinkActive="active" ariaCurrentWhenActive="page"
id="about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/contact" routerLinkActive="active" ariaCurrentWhenActive="page"
id="contact">Contact Me</a>
</li>
</ul>
</div>




Css -

.menu-links-container {
order: 3;
overflow: hidden;
width: 100%;
.navbar-nav {
overflow-x: auto;
scrollbar-width: none;
padding: 0% 30%;
gap: 20px;
align-items: center;
scroll-behavior: smooth;
.nav-link {
white-space: nowrap;
transition: color 0.3s, background-color 0.3s;
}
}
}

Continue reading...