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>

仅使用Polymer（0.5.1）滚动到顶部动画？

1 个答案: