Прокрутите вверх с анимацией, используя только 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>