Polymer 使用neon动画页面时，如何在页面更改后从顶部开始

使用霓虹灯动画页面时，如果页面更改事件在您不在当前页面顶部时触发，它将在页面下方同样切换到新页面。默认行为应该是切换页面并显示新页面的顶部

---

加载新页面后是否有办法滚动到页面顶部？

我可以通过将scrollTop设置为包含neon动画页面的元素来解决此问题。我通过按下按钮更改neon动画页面时调用的功能来完成此操作

document.querySelector('my-container').scrollTop = 0;

---

根据我的经验，最好每个页面都有自己的纸张标题面板、工具栏等。然后，当您更改页面时，下一页将位于顶部，您离开的页面将具有您离开页面时滚动位置的内存。这种方式对我来说似乎有更好的用户体验

<neon-animated-pages selected="{{page}}">
  <neon-animatable>
    <paper-header-panel>
      <paper-toolbar></paper-toolbar>
      //page 1
    </paper-header-panel>
  </neon-animatable>
  <neon-animatable>
    <paper-header-panel>
      <paper-toolbar></paper-toolbar>
      // page 2
    </paper-header-panel>
  </neon-animatable>
</neon-animated-pages>

//第1页
//第2页

唯一的其他实际选项是使用霓虹灯动画结束时激发的事件

<paper-header-panel id="panel">

Polymer({
  is: 'custom-element',
  listeners: {
    'neon-animation-finish': '_onNeonAnimationFinish'
  },
  _onNeonAnimationFinish: function(e) {
    document.querySelector('#panel').scroller().scrollTop = 0;
    // or if panel is in same element 
    this.$.panel.scroller().scrollTop = 0;
  }
});

聚合物({
是：“自定义元素”，
听众：{
“霓虹灯动画完成”：“霓虹灯动画完成”
},
_ONONanimationFinish:函数（e）{
document.querySelector（“#panel”）.scroller（）.scrollTop=0；
//或者面板是否在同一元素中
此.panel.scroller（）.scrollTop=0；
}
});

---

此方法与动画后运行的其他功能相结合，使我的应用程序动画看起来有点僵硬。。这可能并不总是我的经历

这在CSS中是可以解决的。您需要做的是在每个页面中创建一个单独的滚动上下文。为此，请设置以下各项：

HTML:

---

此解决方案的好处在于，每个页面都能记住它以前的滚动位置–因此，如果您在第1页向下滚动，跳转到第2页，在第2页左右滚动，然后跳回第1页，您将返回到第1页中留下的位置。

将此添加到更改事件侦听器：

$('#mainContainer').scrollTop(0);

例如：

$('paper-tabs paper-tab').click(function(){
  $('#mainContainer').scrollTop(0);
  scope.selected = $('paper-tabs paper-tab').index(this)
});

霓虹灯动画/熨斗页面可能位于纸张标题面板内（如果使用Polymer Starter Kit，则常见）

---

请参见

，这将起作用，但可能会导致出现刺耳的动画。因为页面试图滚动到顶部，并且几乎同时设置动画。

$('#mainContainer').scrollTop(0);

$('paper-tabs paper-tab').click(function(){
  $('#mainContainer').scrollTop(0);
  scope.selected = $('paper-tabs paper-tab').index(this)
});