Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

InMemoryScrollingOptions

Configuration options for the scrolling feature which can be used with withInMemoryScrolling function.

      
      interface InMemoryScrollingOptions {
  anchorScrolling?: 'disabled' | 'enabled'
  scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'
}
    

Child interfaces

Properties

Property Description
anchorScrolling?: 'disabled' | 'enabled'

When set to 'enabled', scrolls to the anchor element when the URL has a fragment. Anchor scrolling is disabled by default.

Anchor scrolling does not happen on 'popstate'. Instead, we restore the position that we stored or scroll to the top.

scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'

Configures if the scroll position needs to be restored when navigating back.

  • 'disabled'- (Default) Does nothing. Scroll position is maintained on navigation.
  • 'top'- Sets the scroll position to x = 0, y = 0 on all navigation.
  • 'enabled'- Restores the previous scroll position on backward navigation, else sets the position to the anchor if one is provided, or sets the scroll position to [0, 0] (forward navigation). This option will be the default in the future.

You can implement custom scroll restoration behavior by adapting the enabled behavior as in the following example.

      
      class AppComponent {
  movieData: any;

  constructor(private router: Router, private viewportScroller: ViewportScroller,
changeDetectorRef: ChangeDetectorRef) {
  router.events.pipe(filter((event: Event): event is Scroll => event instanceof Scroll)
    ).subscribe(e => {
      fetch('http://example.com/movies.json').then(response => {
        this.movieData = response.json();
        // update the template with the data before restoring scroll
        changeDetectorRef.detectChanges();

        if (e.position) {
          viewportScroller.scrollToPosition(e.position);
        }
      });
    });
  }
}