Angular 6.1 – scrollPositionRestoration

Angular version 6.1 was released last week. It is a minor release so you can go ahead an use it as a drop-in replacement for 6.0 (run ng update @angular/core @angular/cli).

Apart from bug fixes and performance tweaks there a three new features

 

Router Scroll Position Restoration

Before 6.1, if you clicked a link at the bottom of a page, and then navigated back to that page, the page would jump back to the top. That meant anyone reading your page would lose their position.

Angular 6.1 fixes this problem by introducing a new router property: scrollPositionRestoration.

It takes 3 values:

  • Enabled
  • Disabled
  • Top

You set the scrollPositionRestoration like this:

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

Setting scrollPositionRestoration: ‘enabled’ tells Angular to restore the original position when the back button is pressed.

Here is an example on StackBlitz and here is a YouTube video by Stephen Fluin.

One thought on “Angular 6.1 – scrollPositionRestoration

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.