Javascript 使用Web动画设置DOM属性（scrollTop）的动画

，只是想弄清楚我们在说什么。无论哪种方式，我都希望平滑地滚动到某个元素。使用jQuery的

Animate

函数，这总是一件很简单的事情，但这似乎不像Web动画那么简单。是否有任何方法可以使用Web动画计时功能并将其应用于DOM属性（

scrollTop

）。我问这个问题的原因是，我不想加载整个（额外）库，只是为了使用它的插值功能，而在我的应用程序的其余部分使用不同的技术/库进行加载。

您可以使用动画

scrollTop

，例如

var a = new Animation(el, function(time) {
    el.scrollTop = el.scrollTop + time * 500;
}, 1000);

---

为了便于记录，从Yvonne的答案开始，使用核心动画：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/core-animation/core-animation.html">

<polymer-element name="animated-scroll">
  <template>

    <style>
      #scroller {
        height: 300px;
        overflow-y: scroll;
      }
    </style>
    <button on-tap="{{animate}}">Scroll it</button>
    <div id="scroller">
      <content></content>
    </div>
    <core-animation id="animation" duration="400" easing="ease-in-out"></core-animation>

  </template>
  <script>
    (function () {

      Polymer({
        animate: function (e) {
          var start = this.$.scroller.scrollTop;
          var end = 500; // px
          var delta = end - start;
          this.$.animation.target = this.$.scroller;
          this.$.animation.customEffect = function (timeFraction, target, animation) {
            target.scrollTop = start + delta * timeFraction;
          };
          this.$.animation.play();
        }
      });

    })();
  </script>
</polymer-element>

#卷轴{
高度：300px；
溢出y：滚动；
}
滚动它
（功能（）{
聚合物({
动画：函数（e）{
var start=this.$.scroller.scrollTop；
var end=500；//px
var delta=结束-开始；
this.$.animation.target=this.$.scroller；
此.$.animation.customEffect=函数（时间分割、目标、动画）{
target.scrollTop=开始+增量*分时；
};
这是$.animation.play（）；
}
});
})();

处理同一问题。似乎WA只对CSS属性设置动画，scrollTop不是一个。@clyfe很好，结果证明我当时并不是完全疯了：P不管怎样，我从未实现过它，但我曾经考虑在一个不可见的元素上设置一个随机的廉价CSS属性的动画，并使用它来移动

scrollTop

。不漂亮，但比加载整个额外的库要好。今晚晚些时候还需要尝试，但看起来很完美：O感谢您在Polymer:D上的出色工作（欢迎使用StackExchange？）这里有一个实用的JSFIDLE btw，适用于在某个时候遇到这个问题的每个人：

动画

现在在W3C规范中被称为

KeyframeEffect

。在当前版本的规范中，浏览器实现

KeyframeEffect

没有回调函数，因此上面的代码不再有效.你们有使用Polymer 1.0的版本吗？核心动画已被弃用，新的霓虹灯动画支持是相当难以捉摸。