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