polymer - 仅使用 Polymer (0.5.1) 使用动画滚动到顶部？

Question

我在paper-fab屏幕的右下角创建了一个。我想让它在用户单击此按钮时滚动到页面顶部（带有动画）。有什么方法可以使用 Polymer 而不是 jQuery/JavaScript 来做到这一点？谢谢您的帮助！

Answer 1

您可以创建自定义元素

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-fab/paper-fab.html">

<polymer-element name="custom-fab" extends="paper-fab" on-tap="scrollToTop">
    <template>
        <shadow></shadow>
    </template>

    <script>

        var scrollTop = function() {
            var scrollDuration = 500;
            var scrollStep = -window.scrollY / (scrollDuration / 15),
                scrollInterval = setInterval(function(){
                    if ( window.scrollY != 0 ) {
                        window.scrollBy( 0, scrollStep );
                    }
                    else clearInterval(scrollInterval); 
                },15);

        }

        Polymer({

            scrollToTop: function() {
                scrollTop();
            }

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