Polymer (0.5.1) 만 사용하여 애니메이션으로 스크롤하십시오.

Question

화면의 오른쪽 하단에 paper-fab을 만들었습니다. 나는 사용자가이 버튼을 클릭 할 때 페이지 위쪽으로 (애니메이션과 함께) 스크롤되도록 만들기를 원한다. jQuery/JavaScript 대신 Polymer를 사용하여이 작업을 수행 할 수있는 방법이 있습니까? 도와 주셔서 감사합니다!

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>