Scroll to top with animation using only Polymer (0.5.1)?

Question

I created a paper-fab in the bottom right corner of the screen. I want to make it so that when a user clicks on this button, it scrolls to the top of the page (with an animation). Is there any way I can do this using Polymer instead of jQuery/JavaScript? Thanks for the help!

Answer 1

You can create custom element

<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>