JavaScript HTML CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
rolling Fixed double stop bug Jan 7, 2017
test Added rollDirection function Aug 7, 2015
util Refactoring Dec 28, 2015
.editorconfig Refactoring Dec 28, 2015
jquery.rolling.js Fixed double stop bug Jan 7, 2017
rolling.js Fixed double stop bug Jan 7, 2017


Everything about scroll

All calculations are super optimized for smooth scrolling

rollDirections(el, [options], cb)

Calls cb when el scrolling changed direction

  • el — element to scroll
  • options
    • direction — 'vertical || horizontal', default "vertical"
    • threshold — scroll change should be bigger that threshold, defaul 0
  • callback — callback function, optional


rollDirections(window, {
        direction: "vertical",
        threshold: 5
    function(dir) {
        console.log(dir); //prints true for down and false for up

rollTo(el, options, [cb])

Scrolls element for your pleasure. Rolling is always interrupted when a user starts to scroll

  • el — element to scroll
  • options
    • to — html element or selector or {top: number, left: number}
    • direction — 'vertical || horizontal || both', default "vertical"
    • shiftTop — shift of original position, can be negative, default 0
    • shiftLeft — shift of original position, can be negative, default 0
    • duration — animation duration, default 1000ms
    • ease — easing function, default "linear"
  • callback — callback function, optional

Easing functions

inQuad, outQuad, inOutQuad, inCubic, outCubic, inOutCubic, inQuart, outQuart, inOutQuart, inQuint, outQuint, inOutQuint, inSine, outSine, inOutSine, inExpo, outExpo, inOutExpo, inCirc, outCirc, inOutCirc, inElastic, outElastic, inOutElastic, inBack, outBack, inOutBack.


rollTo(window, {
        to: "#content",
        direction: "both",
        shiftTop: 50,
        ease: "inOutExpo"
    function() {console.log('done');}

rollOn(el, options, cb)

Calls the callback function if the conditions result is changed.

  • el — element to scroll
  • options
    • on — html element or selector`
    • condition conditions for an html element position relative to the scroll position of the el
  • callback — callback function, gets boolean value on condition changes and an html element that triggered the change


Example: 'top(20) and bottom(-20)'


  • vertical: top, middle, bottom
  • horizontal: left, center, right
  • logic: and, or

Keywords can be included in each other within same direction, outside keyword means el position to compare and inside keyword target position to compare. This way:

  • "top(bottom(20))" — full condition, means top position of the el should be compare to bottom position of target, and difference should be less than 20
  • "top" — basicaly, this is shortcut for "top(top(0))"
  • "top(20)""top(top(20))"
  • "top(bottom)""top(bottom(0))"


 rollOn(window, {
        on: "#content",
        condition: "top(10) and bottom(-10)"
    function(condition, el) { = condition ? "#00ff00" : "#ff0000";

jQuery versions


// scroll window to position 10

// scroll window to navigation
$(window).rollTo({to: 'nav'});
$(window).rollTo({to: '.navigation'});
$(window).rollTo({to: '#navigation'});
$(window).rollTo({to: $('#navigation')});

Browser support

Safari, Firefox, IE9+, Chrome, Mobile Safari.

License: MIT;