Angular Smooth Scroll

HiSmooth scroll doesnt seem to work at least as I expectI have my app.component.html where the <app-navbar></app-navbar> and <router-outlet></router-outlet> tags are.In the navbar component have a nav like this:

<mdb-navbar SideClass="navbar fixed-top navbar-expand-md navbar-dark">
<logo>
...
</a>
</logo>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item active waves-light" routerLinkActive="active" mdbWavesEffect>
<a class="nav-link" [routerLink]="['home']" mdbPageScroll href="#scroll1">Home
</a>
</li>
<liclass="nav-item waves-light"mdbWavesEffect>
<a class="nav-link" [routerLink]="['about']" mdbPageScroll href="#scroll2"><span>About</span>
</li>

<li class="nav-item waves-light"mdbWavesEffect>
<a class="nav-link" [routerLink]="['another']" mdbPageScroll href="#scroll3" ><i class="fa fa-phone-square" aria-hidden="true" ></i>Another Thing</a>
</li>
</ul>

</links>
</mdb-navbar>

And in the content of my another components  (HomeComponent, AboutComponent, AnotherComponent) there's a div sourronding the  content i want to displayHome<div id="scroll1">Hello world from Home</div>About<div id="scroll2">Hello world from About</div>Another<div id="scroll3">Hello world from Another</div> Finally In my app.routing.ts  are my  routes

const appRoutes : Routes =[
{ path:'home', component:HomeComponent },
{ path:'about', component : AboutComponent },
{ path:'another', component : AnotherComponent },
{ path:'',redirectTo : 'home', pathMatch: 'full' }
];
export const routing = RouterModule.forRoot(appRoutes)

So I expect 2 scenario but neither of 2 works... so correct me if im wrong

1  When my app starts I land in home so if I scroll down home it will be able to see  the next (about, another) components  (the components will render on scroll)

2. When I use my navbar and click in the navbar item it will automatically scrolls down  (and render) the components between one component and another...

What i recive is just a normal change into components...

When I try to make in one component with dummy divs this works but brokes the router-outlet paradigm its what I try to acomplish