By default, when using Angular routerLink tags in your HTML, the behavior users will experience when clicking these links is that the browser keeps the current scrollbar positions, before and after clicking.

There are cases where this is undesirable, such as when using an Angular router to route URLs (such as /home or /articles ) to Angular components.

To fix this, add in your app-routing.module.ts file the following into the @NgModule imports:

@NgModule({
    imports: [
        RouterModule.forRoot(
            routes,
            {
                scrollPositionRestoration: 'enabled' // https://stackoverflow.com/a/44372167
            }
        )
    ],
    exports: [RouterModule]
})

Credit where credit is due - this was found and validated by me, but added to Stack Overflow here.

If you don’t have an app-routing.module.ts, well, the file (and other Angular routing integration) is auto-generated by Angular. I’ve done a bit of searching on how to add routing to an existing project that didn’t have it already, and in my opinion, it’s potentially easier (YMMV) to just generate a new project and answer ‘Yes’ to adding routes when prompted, and migrate your services/components/etc.