title: Angular UI Router: Setting autoscroll on header view does not scroll to top
body: <p>TL;DR: With Angular UI Router, is it possible to autoscroll to a view of the same state that the template displaying it belongs to?</p>
  
  <p><strong>The Setup</strong></p>
  
  <p>I have an Angular <code>1.4.1</code> app, using UI Router <code>0.2.15</code> and Angular Material <code>0.10.0</code>.</p>
  
  <p><a href="http://plnkr.co/edit/4Pc9IYA20PjAscojCXe0?p=preview" rel="nofollow noreferrer">Example Plunk</a></p>
  
  <p>There is a parent state called <code>website</code> and three child states: <code>home</code>, <code>foo</code> and <code>bar</code>.</p>
  
  <p>The parent state has a <code>wrapper</code> view, which is displayed via the <code>&lt;ui-view&gt;</code> tag in <code>index.html</code>. It also has two other views, <code>header@website</code> and <code>footer@website</code>, which it displays via the <code>wrapper</code> view template.</p>
  
  <p>Each of the three child states has a <code>main</code> view, which is displayed via the parent state's <code>wrapper</code> view template.</p>
  
  <p><strong>What I Expect</strong></p>
  
  <p>In the parent state's <code>wrapper</code> view template, when I set <code>autoscroll="true"</code> on the <code>ui-view</code> tag for the <code>header@website</code> view, I expect that the page will scroll to the top whenever the state changes. See the accepted answer of <a href="https://stackoverflow.com/questions/21711939/cant-figure-out-why-page-loads-at-bottom-angular-ui-router-autoscroll-issue">this SO question</a>.</p>
  
  <p><strong>What Is Happening</strong></p>
  
  <p>When any of the <code>ui-sref</code> links in the footer is clicked, the page does not scroll to the top.</p>
  
  <p><strong>What I've Tried</strong></p>
  
  <p>If I put <code>autoscroll="true"</code> on the <code>ui-view</code> tag for the main view, it works as expected. This is not what I want, however, because the header is hidden from view even when you navigate to a state from the address bar.</p>
  
  <p><strong>What I Suspect</strong></p>
  
  <p>I think the problem has to do with the fact that <code>header@website</code> is a view that belongs to the <code>website</code> state, and that <code>autoscroll</code> only works for views that normally are displayed on the current template. In other words, normally the <code>header</code> view would be displayed via <code>index.html</code>, not <code>wrapper.html</code>.</p>
  
  <p><strong>The Question</strong></p>
  
  <p>Is my suspicion above correct? Do I need to refactor, or is there a way to make this work as is?</p>
  
  <p>Thanks in advance!</p>