JavaScript Scroll
Table of Contents
Smooth scrolling system.
Something looks broken? We accept bounties to fix them faster.
^ | 232 Downloads |
---|---|
v1.2.1 | 317 Downloads |
This extension takes any HTML anchor elements that has a js:scroll
class in it and then will add a click event to it, which once clicked, it will scroll the current page into specific section that has an ID as defined in the fragment identifier. Default action is to scroll to the left and top of the page.
Basic Usage
<a class="js:scroll" href="#">Top</a>
<a class="js:scroll" href="#comments">Add Comment</a>
Advance Usage
Add these data-*
attributes to customize the effect:
Option | Description |
---|---|
duration | The animation duration in milliseconds. |
ease | The easing type. |
hash | Set to false to disable the automatic URL hash addition once the scroll animation ends. Set to any value other than true and 1 to override the original URL hash. |
Example:
<a class="js:scroll" href="#" data-ease="out-bounce">Top</a>
Supported Easing Type
Default
<a class="js:scroll">default (easeOut)</a>
Linear
<a class="js:scroll" data-ease="">linear</a>
Swing
<a class="js:scroll" data-ease="in">easeIn</a>
<a class="js:scroll" data-ease="out">easeOut</a>
<a class="js:scroll" data-ease="in-out">easeInOut</a>
Quadratic
<a class="js:scroll" data-ease="in-quad">easeInQuad</a>
<a class="js:scroll" data-ease="out-quad">easeOutQuad</a>
<a class="js:scroll" data-ease="in-out-quad">easeInOutQuad</a>
Cubic
<a class="js:scroll" data-ease="in-cubic">easeInCubic</a>
<a class="js:scroll" data-ease="out-cubic">easeOutCubic</a>
<a class="js:scroll" data-ease="in-out-cubic">easeInOutCubic</a>
Quartic
<a class="js:scroll" data-ease="in-quart">easeInQuart</a>
<a class="js:scroll" data-ease="out-quart">easeOutQuart</a>
<a class="js:scroll" data-ease="in-out-quart">easeInOutQuart</a>
Quintic
<a class="js:scroll" data-ease="in-quint">easeInQuint</a>
<a class="js:scroll" data-ease="out-quint">easeOutQuint</a>
<a class="js:scroll" data-ease="in-out-quint">easeInOutQuint</a>
Sinusoidal
<a class="js:scroll" data-ease="in-sine">easeInSine</a>
<a class="js:scroll" data-ease="out-sine">easeOutSine</a>
<a class="js:scroll" data-ease="in-out-sine">easeInOutSine</a>
Exponential
<a class="js:scroll" data-ease="in-expo">easeInExpo</a>
<a class="js:scroll" data-ease="out-expo">easeOutExpo</a>
<a class="js:scroll" data-ease="in-out-expo">easeInOutExpo</a>
Circular
<a class="js:scroll" data-ease="in-circ">easeInCirc</a>
<a class="js:scroll" data-ease="out-circ">easeOutCirc</a>
<a class="js:scroll" data-ease="in-out-circ">easeInOutCirc</a>
Back Effect
<a class="js:scroll" data-ease="in-back">easeInBack</a>
<a class="js:scroll" data-ease="out-back">easeOutBack</a>
<a class="js:scroll" data-ease="in-out-back">easeInOutBack</a>
Bounce Effect
<a class="js:scroll" data-ease="in-bounce" data-duration="3000">easeInBounce</a>
<a class="js:scroll" data-ease="out-bounce" data-duration="3000">easeOutBounce</a>
<a class="js:scroll" data-ease="in-out-bounce" data-duration="3000">easeInOutBounce</a>
Elastic Effect
<a class="js:scroll" data-ease="in-elastic" data-duration="3000">easeInElastic</a>
<a class="js:scroll" data-ease="out-elastic" data-duration="3000">easeOutElastic</a>
<a class="js:scroll" data-ease="in-out-elastic" data-duration="3000">easeInOutElastic</a>