scroll-button

Does not provide any style and structure, you need to handwrite the structure in scroll-button. Specify the direction and parent attributes to start scrolling!

Code snippets

Back to Top

Feel it 
            
<scroll-button>
  <button>Feel it</button>
</scroll-button>
          
        
            
<scroll-button direction="top">
  <button>Feel it</button>
</scroll-button>

Back to Bottom

Feel it 
            
<scroll-button direction="bottom">
  <button>Feel it</button>
</scroll-button>
            
          
            
<scroll-button direction="bot">
  <button>Feel it</button>
</scroll-button>

Scroll Speed

x1 x8 
            
<scroll-button speed="1">
  <button>x1</button>
</scroll-button>
            
          
            
<scroll-button speed="8">
  <button>x8</button>
</scroll-button>

Scroll Step

/0.5 /16 
<scroll-button step="0.5">
  <button>/0.5</button>
</scroll-button>
            
          
            
<scroll-button step="16">
  <button>/16</button>
</scroll-button>

Scroll in box

Feel it(TOP) Feel it(BOTTOM) 
            
<div style="height: 100px; overflow: auto;">
  <div id="boxOne" style="height: 2000px;">
  </div>
</div>
            
          
            
<scroll-button parent="#boxOne">
  <button>Feel it(TOP)</button>
</scroll-button>
            
          
            
<scroll-button parent="#boxOne" direction="bot">
  <button>Feel it(BOTTOM)</button>
</scroll-button>