title: Problem of progress bar animation when scroll to top
body: <p>I'm working on an electron app with angular.
  I found my progress bar animation problem when I was changing pages with scrollTo function.</p>
  
  <p>Here is my situation.</p>
  
  <p>My router-outlet is in a div, but in some pages the contents are too long, 
  so there is a progress bar on the side of div.
  I add a class to the div and use 'scrollTop' to let scroll bar back to top.
  And my progress bar animation start with 100% and bounce back to 0 immediately, even if I fill the progress value with 0.</p>
  
  <p>I also use the method Angular provide 'scrollPositionRestoration' in RoterModule, but it didn't work with router-outlet in a div.</p>
  
  <p>Are there any solutions to prevent animation problem and scroll the div back to top.
  Thanks!</p>
  
  <p>app.component.html -></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class='logoContainer'&gt;
          &lt;img [src]='logo' class='logo'/&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;router-outlet (activate)="onActivate($event)"&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts -></p>
  
  <pre><code>  onActivate(event) {
        // scroll to top
        document.getElementsByClassName('content')[0].scrollTo(0, 0);
     }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NndfG.gif" rel="nofollow noreferrer">Here is the gif to show what happend</a></p>