Turning on ScrollTop Restoration for the Standalone Angular Router

Image by Couleur from Pixabay

Scenario

We want the Angular Router to always scroll back to the top of the viewport after navigation.

Approach

While bootstrapping the app component configure the router like this.

const scrollConfig: InMemoryScrollingOptions = {
  scrollPositionRestoration: 'top',
  anchorScrolling: 'enabled',
};

const inMemoryScrollingFeature: InMemoryScrollingFeature =
  withInMemoryScrolling(scrollConfig);
bootstrapApplication(App, {
  providers: [provideRouter(routes, inMemoryScrollingFeature)],
});

Demo

This demo shows what happens without scroll position restoration. If you scroll to the bottom of view 1 and then navigate to view2, the viewport scroll position will remain at the bottom.