如何动画滚动到核心标题面板上具有id的元素

Question

如何在核心标题面板中为“滚动到元素ID”设置动画？

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'},
    ...
]