title: Angular router "scrollPositionRestoration" not working well with router animations
body: <p>I'm trying to design a site using Angular 8 with router animations. I have imported the <code>BrowserAnimationsModule</code> and I do see the animations work to some extent.</p>
  
  <p>I'm also using the <code>scrollPositionRestoration</code> of Angular router to make sure that when users click on a link to see a new page, the top of the new page is shown instead of the previous scroll position.</p>
  
  <p>However, when the router loads a new component into the view, it scrolls the entire window to the very top abruptly while applying the router animation. I tried disabling the <code>scrollPositionRestoration</code> property which indeed gets rid of the annoying scroll, however my new page is loaded at the previous scroll position instead of the top.</p>
  
  <p>Here's a slackblitz that demonstrates my problem: <a href="https://stackblitz.com/edit/angular-xpadeg" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-xpadeg</a>.</p>
  
  <p>To recreate the problem, go to the "about" page, scroll down and then click on the "home" link and the abrupt scroll will show as the animation executes.</p>