This extension is considered obsolete. CSS now supports smooth scrolling features natively which does not require JavaScript to make it work. Use this extension only if you need animation effects which are not supported by the
scroll-behavior standard such as ease-in/out-bounce and ease-in/out-elastic effects. This extension was last updated to work with core version 3.0.0. Contribute to the code if you want to keep this extension compatible with future core versions. Table of Contents
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>
0 Comments
No comments yet.