UX & Navigation

Auto Scroll Restoration

Prevent users from landing in the footer. Configure the router so that your SPA feels like a classic website.

This is one of the very first configuration changes I make in every new Angular project. By default, Single Page Applications (SPAs) retain the scroll position when navigating between pages.

The scenario: A user reads a long article, scrolls all the way down, and clicks "Next Article".
The problem: Angular swaps the content, but the user suddenly stares at the footer of the new page and has to manually scroll up. This ruins the user experience.

1. The Simulation

I built this demo to show the difference. Scroll down in the mockup and click the button. Pay attention to where you land on the "Detail Page".

Scroll Restoration: DISABLED

⚠️ Default SPA Behavior

localhost:4200/home

Home Page

Welcome. Scroll down to see more.

2. Implementation

Forget manual hacks like window.scrollTo(0,0). Angular has this feature built directly into the router. We just need to enable it in app.config.ts.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withInMemoryScrolling } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      // The feature flag for improved scrolling:
      withInMemoryScrolling({
        // 1. Always scroll to the top on navigation (except for "Back" button)
        scrollPositionRestoration: 'enabled',

        // 2. Allows links with hash (e.g., /contact#form)
        anchorScrolling: 'enabled',
      })
    )
  ]
};

💡

Anchor Scrolling: I almost always enable anchorScrolling: 'enabled' as well. This makes links with hashes (e.g., /contact#form) finally work as expected in HTML: They smoothly jump to the correct section.