Implementing Automatic Scroll to Top on Route Changes in Angular

Problem Background and Challenges

In single-page application (SPA) development, page scroll behavior during route transitions is a common user experience concern. When users scroll to the bottom of a long page and click a link to navigate to a new page, if the new page has limited content, users might mistakenly believe content is missing because the browser maintains the previous scroll position, displaying the bottom area of the new page instead of the top.

This issue is particularly noticeable in content-intensive applications such as news websites, e-commerce platforms, or documentation systems, where users expect to start browsing from the top after each page transition.

Built-in Solution for Angular 6.1+

Angular version 6.1 introduced native scroll position restoration functionality, which can be enabled through simple router configuration. This is currently the recommended approach as it's officially supported by the framework, well-maintained, and performance-optimized.

In the application's main routing module, simply add the scrollPositionRestoration: 'enabled' option to the RouterModule.forRoot() method:

import { RouterModule } from '@angular/router';

const routes = [
  // Route definitions...
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This configuration ensures:

• Automatic scrolling to page top during forward navigation
• Restoration of previous scroll position during backward navigation
• Proper management of scroll positions in browser history

According to the Angular official blog, this feature is expected to become default behavior in future major releases, but currently (as of Angular 13) it still requires explicit enablement.

Custom Implementation for Angular 6.0 and Earlier

For older versions without built-in support, manual scroll position management is necessary. A common simple approach involves listening for route end events and scrolling to top:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        window.scrollTo(0, 0);
      }
    });
  }
}

However, this simple method has significant drawbacks: it breaks normal browser forward/backward behavior. When users click the back button, the page should return to its previous scroll position, but this implementation forces scrolling to top.

Complete Scroll Position Management Solution

To address forward/backward navigation issues, more sophisticated scroll position management is required. The following implementation uses scroll position stacking to differentiate between navigation types:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { Location, PopStateEvent } from "@angular/common";

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  private lastPoppedUrl: string;
  private yScrollStack: number[] = [];

  constructor(private router: Router, private location: Location) { }

  ngOnInit() {
    // Listen for browser history changes (forward/backward)
    this.location.subscribe((ev: PopStateEvent) => {
      this.lastPoppedUrl = ev.url;
    });

    // Listen for router events
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationStart) {
        // For new navigation (not forward/backward), save current scroll position
        if (event.url != this.lastPoppedUrl) {
          this.yScrollStack.push(window.scrollY);
        }
      } else if (event instanceof NavigationEnd) {
        if (event.url == this.lastPoppedUrl) {
          // Forward/backward navigation: restore previous scroll position
          this.lastPoppedUrl = undefined;
          const scrollY = this.yScrollStack.pop();
          window.scrollTo(0, scrollY || 0);
        } else {
          // New page navigation: scroll to top
          window.scrollTo(0, 0);
        }
      }
    });
  }
}

Core logic of this implementation:

• Scroll Position Stack: The yScrollStack array stores scroll positions when leaving each page
• History Tracking: Uses Location service to monitor PopStateEvent for identifying forward/backward navigation
• Intelligent Scroll Decision: Determines whether to restore position or scroll to top based on navigation type

Special Considerations for Server-Side Rendering (SSR)

In server-side rendering environments, scroll position management may face additional challenges. As mentioned in the reference article, the built-in scrollPositionRestoration option might not work properly in SSR mode under certain circumstances.

Recommended solutions for SSR applications:

1. First ensure using the latest Angular version, as SSR support continues to improve
2. If built-in functionality fails, fall back to custom implementation
3. Handle initial scrolling in the ngAfterViewInit lifecycle hook to ensure DOM is fully rendered

Performance Optimization and Best Practices

When implementing scroll position management, consider the following performance aspects:

• Event Listener Cleanup: Unsubscribe from events during component destruction to prevent memory leaks
• Debouncing: For frequent route changes, consider adding appropriate delays
• Smooth Scrolling: Use window.scrollTo({ top: 0, behavior: 'smooth' }) for better user experience
• Mobile Adaptation: Ensure consistent scroll behavior on touch devices

Summary and Recommendations

For handling scroll position restoration in Angular applications, recommended priority order:

1. Preferred Approach: For Angular 6.1+, use built-in scrollPositionRestoration: 'enabled'
2. Compatibility Approach: For older versions or special requirements, adopt complete custom scroll management implementation
3. Testing Validation: Test scroll behavior across various navigation scenarios (link clicks, browser forward/backward, programmatic navigation)

As the Angular framework continues to evolve, scroll position management is expected to become simpler and more reliable. Developers should monitor official documentation and version updates to adopt optimal solutions promptly.