How can I animate scroll to an element with id on a core-header-panel

Question

How can you animate "scroll to element-id" in a core-header-panel?

HTML

<button on-tap="{{ScrollToId(1)}}">Scroll</button>
<template id="auto-binding">
    <core-header-panel flex>
        <template repeat={{page in pages}}>
            <div id="page-id-{{page.id}}">
               <h1>Page - {{page.name}}</h1>
            </div>
        </template>
    </core-header-panel>
</template>

JavaScript

var template = document.querySelector('template[is="auto-binding"]');
template.ScrollToId = function(id){
    //something here
},
template.pages = [
    {id:1,name:'Alpha'},
    {id:2,name:'Beta'},
    {id:3,name:'Charlie'},
    ...
]