Skip to content

Instantly share code, notes, and snippets.

@prisme

prisme/scrollTo.js

Last active August 29, 2015 14:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save prisme/0678562c4af604e0ac2d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save prisme/0678562c4af604e0ac2d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. prisme revised this gist Nov 17, 2014. 1 changed file with 20 additions and 12 deletions.
    32 changes: 20 additions & 12 deletions scrollTo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,8 @@
    /*
    *
    * Works with numbers or elements (not jquery objects)
    * Works with elements or jquery
    *
    * scrollTo(100);
    * scrollTo(element);
    * scrollTo(element, duration, offset);
    *
    * Update 'scroller' variable with custom scrolling element if not document.body
    *
    @@ -13,14 +12,23 @@ define([
    'gsap'
    ], function() {
    var dummy = document.createElement('div');
    var scroller = document.body;
    var distance = 0;
    var isWebkit = 'WebkitAppearance' in document.documentElement.style;
    var scroller = isWebkit ? document.body : document.documentElement;

    return function(element) {
    distance = typeof element == 'object' ? element.offsetTop : element;
    TweenLite.set(dummy, {x: scroller.scrollTop });
    TweenLite.to(dummy, Math.abs(distance - scroller.scrollTop) / 1000, {x: distance, ease: Power1.easeInOut, onUpdate: function() {
    scroller.scrollTop = parseInt(dummy._gsTransform.x);
    }});
    return function( element, duration, offset ){
    var minDuration = 0.2;
    var offset = offset || 0;
    var element = element instanceof jQuery ? element.get(0) : element;
    var distance = Math.abs( element.offsetTop - scroller.scrollTop + offset );
    var duration = duration || (minDuration + distance / 3000).toFixed(2);

    TweenLite.set(dummy, { x: scroller.scrollTop });
    TweenLite.to(dummy, duration, {
    x: element.offsetTop + offset,
    ease: Power1.easeInOut,
    onUpdate: function() {
    scroller.scrollTop = (dummy._gsTransform.x).toFixed(2);
    }
    });
    }
    });
    })
  2. @gordonnl gordonnl revised this gist Sep 25, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion scrollTo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@
    * scrollTo(100);
    * scrollTo(element);
    *
    * Update 'srcoller' variable with custom scrolling element if not document.body
    * Update 'scroller' variable with custom scrolling element if not document.body
    *
    */

  3. @gordonnl gordonnl revised this gist Sep 25, 2014. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions scrollTo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,11 +14,13 @@ define([
    ], function() {
    var dummy = document.createElement('div');
    var scroller = document.body;
    var distance = 0;

    return function(element) {
    distance = typeof element == 'object' ? element.offsetTop : element;
    TweenLite.set(dummy, {x: scroller.scrollTop });
    TweenLite.to(dummy, 1, {x: typeof element == 'object' ? element.offsetTop : element, ease: Power1.easeInOut, onUpdate: function() {
    TweenLite.to(dummy, Math.abs(distance - scroller.scrollTop) / 1000, {x: distance, ease: Power1.easeInOut, onUpdate: function() {
    scroller.scrollTop = parseInt(dummy._gsTransform.x);
    }});
    }
    });
    });
  4. @gordonnl gordonnl created this gist Sep 25, 2014.
    24 changes: 24 additions & 0 deletions scrollTo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    /*
    *
    * Works with numbers or elements (not jquery objects)
    *
    * scrollTo(100);
    * scrollTo(element);
    *
    * Update 'srcoller' variable with custom scrolling element if not document.body
    *
    */

    define([
    'gsap'
    ], function() {
    var dummy = document.createElement('div');
    var scroller = document.body;

    return function(element) {
    TweenLite.set(dummy, {x: scroller.scrollTop });
    TweenLite.to(dummy, 1, {x: typeof element == 'object' ? element.offsetTop : element, ease: Power1.easeInOut, onUpdate: function() {
    scroller.scrollTop = parseInt(dummy._gsTransform.x);
    }});
    }
    });