JavaScript Scroll

Table of Contents

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:

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>