polymer core-header-panel scrollIntoView - polymer

Question

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