withInMemoryScrolling in Angular: Modern Scroll Restoration and Anchor Scrolling Explained

Source: Dev.to

Introduction

Single‑page applications (SPAs) fundamentally changed web navigation by eliminating full page reloads. However, this architectural shift introduced a UX regression: browsers lost their native ability to restore scroll positions when users navigate backward or forward through history.

In traditional multi‑page applications, the browser automatically remembers where you scrolled on a page and returns you to that exact position when you hit the back button. SPAs broke this behavior.

Angular’s withInMemoryScrolling router feature addresses this gap by giving the router control over scroll behavior during navigation. It provides declarative configuration for two critical scroll‑related features:

• Scroll position restoration across route changes.
• Fragment‑based anchor scrolling.

Why you should care

If your app frequently navigates between routes and users expect intuitive scroll behavior—think content‑heavy sites, e‑commerce list‑detail pages, dashboards with tabbed interfaces, or any application where preserving navigation context improves usability—this feature is essential.

What Is withInMemoryScrolling?

withInMemoryScrolling is a router‑feature function introduced in Angular’s standalone‑API era. It enables the router to manage scroll behavior during navigation events. The “in‑memory” designation refers to how Angular stores scroll positions: it maintains a map of scroll positions in memory, keyed by navigation state, rather than relying on browser‑native mechanisms.

How it works

1. Navigation start – the router captures the current scroll position.
2. Navigation end – based on the configuration, the router decides to:
   • restore a previous position,
   • scroll to the top,
   • scroll to an anchor (fragment), or
   • leave the scroll unchanged.

The decision depends on options such as scrollPositionRestoration and anchorScrolling, as well as the navigation context (forward navigation, back navigation, route reload, etc.).

Browser default vs. Angular router‑controlled scrolling

Setting It Up (Standalone API)

Basic configuration

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      withInMemoryScrolling({
        scrollPositionRestoration: 'enabled', // or 'disabled' | 'top'
        anchorScrolling: 'enabled'            // or 'disabled'
      })
    )
  ]
};

Standalone bootstrap approach

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withInMemoryScrolling } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(
      routes,
      withInMemoryScrolling({
        scrollPositionRestoration: 'enabled',
        anchorScrolling: 'enabled'
      })
    )
  ]
});

Configuration Options

scrollPositionRestoration values

Example: Disable scroll restoration

withInMemoryScrolling({
  scrollPositionRestoration: 'disabled'
});

Example: Enable scroll restoration

withInMemoryScrolling({
  scrollPositionRestoration: 'enabled'
});

Anchor Scrolling

When anchorScrolling is set to 'enabled', the router automatically scrolls to the element whose id matches the URL fragment (e.g., #section-2). This works together with scrollPositionRestoration—if you navigate back to a URL containing a fragment, the router will first restore the saved scroll position, then scroll to the anchor if needed.

withInMemoryScrolling({
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled'
});

Full Article & Demo

• Read the full article – a deep dive into the internals, edge cases, and performance considerations.
• Explore the live demo – see the feature in action with different configuration combos.
• Access the complete source code – clone, experiment, and adapt to your own projects.

Full Article →
Live Demo →
GitHub Repository →

Join the Conversation

• Did this article spark new ideas or solve a real problem? Let me know!
• Already using this technique? Share your experience.
• Got questions, doubts, or your own twist on the approach? Drop them in the comments—let’s learn together!

Spread the Word

If this guide added value to your development journey:

• Share it with your team, tech friends, or community—you never know who might need it right now.
• Save it for future reference.

Happy coding! 🚀

Quick Reference & Resources

I regularly share hands‑on tutorials, clean‑code tips, scalable frontend architecture, and real‑world problem‑solving guides.

🎉 If you found this article valuable

• Leave a 👏 Clap
• Drop a 💬 Comment
• Hit 🔔 Follow for more weekly frontend insights

Let’s build cleaner, faster, and smarter web apps — together.

Stay tuned for more Angular tips, patterns, and performance tricks! 🧪🧠🚀

✨ Share Your Thoughts → 📣 Set Your Notification Preference