title: polymer core-header-panel scrollIntoView
body: <p>I thought I would get lucky and just do <code>window.scrollTo(0,500)</code> but that did not work because the core-header-panel is doing the scrolling for me.</p>
  
  <p>Suppose you have two elements</p>
  
  <pre><code> &lt;core-header-panel&gt;
    &lt;core-animated-pages selected="{{s}}"&gt;
        &lt;section&gt;&lt;my-element select={{s}}&gt;&lt;/my-element&gt;&lt;/section&gt;
        &lt;section&gt;&lt;my-element select={{s}}&gt;&lt;/my-element&gt;&lt;/section&gt;
    &lt;/core-animated-pages&gt;
   &lt;/core-header-panel&gt;
  
  
  &lt;/template&gt;
  </code></pre>
  
  <p>I see the element I want to scroll to in the console but it does not scroll?</p>
  
  <pre><code>&lt;polymer-element name="my-element" attributes="select"&gt;
   &lt;template&gt;
       ....
   &lt;/template&gt;    
   &lt;script&gt;
      Polymer('my-element', {
          select:0,
          selectChanged: function(){
              var x=this.shadowRoot.querySelector("#id")
              if (x){
                  console.log(x)
                  x.scrollIntoView()
              }
          }
      });
   &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <pre><code>&lt;polymer-element name="my-element" attributes="select"&gt;
   &lt;template&gt;
       &lt;core-animated-pages fit selected="{{select}}" id="core_page"&gt;
               ....
       &lt;/core-animated-pages&gt;
   &lt;/template&gt;    
   &lt;script&gt;
      Polymer('my-element', {
          ready: function(){
              this.$.core_page.addEventListener("core-animated-pages-transition-end", function(e) {
                  var x=this.shadowRoot.querySelector("#id")
                  if (x){
                      console.log(x)
                      x.scrollIntoView()
                   }
               })
          }
      });
   &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>