Mecha CMS

Add extra functionality to the core engine.

JavaScript Scroll

Table of Contents
  1. Basic Usage 
  2. Advance Usage 
  3. Supported Easing Type 
    1. Default 
    2. Linear 
    3. Swing 
    4. Quadratic 
    5. Cubic 
    6. Quartic 
    7. Quintic 
    8. Sinusoidal 
    9. Exponential 
    10. Circular 
    11. Back Effect 
    12. Bounce Effect 
    13. Elastic Effect 

Smooth scrolling system.

Download Version 1.2.1 Download Development Version

Something looks broken? We accept bounties to fix them faster.

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:

OptionDescription
durationThe animation duration in milliseconds.
easeThe easing type.
hashSet 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>