Skip to content

Instantly share code, notes, and snippets.

@nathansearles

nathansearles/scrollTo.js

Forked from james2doyle/scrollTo.js
Created June 8, 2022 16:50
Download ZIP

Revisions

  1. @james2doyle james2doyle revised this gist Dec 16, 2014. 1 changed file with 17 additions and 10 deletions.
    27 changes: 17 additions & 10 deletions scrollTo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -25,22 +25,29 @@ var requestAnimFrame = (function(){
    })();

    function scrollTo(to, callback, duration) {
    // figure out if this is moz || IE because they use documentElement
    var doc = document.documentElement,
    start = doc.scrollTop,
    change = to - start,
    currentTime = 0,
    increment = 20;
    duration = (typeof(duration) === 'undefined') ? 500: duration;
    var animateScroll = function(){
    // because it's so fucking difficult to detect the scrolling element, just move them all
    function move(amount) {
    document.documentElement.scrollTop = amount;
    document.body.parentNode.scrollTop = amount;
    document.body.scrollTop = amount;
    }
    function position() {
    return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop;
    }
    var start = position(),
    change = to - start,
    currentTime = 0,
    increment = 20;
    duration = (typeof(duration) === 'undefined') ? 500 : duration;
    var animateScroll = function() {
    // increment the time
    currentTime += increment;
    // find the value with the quadratic in-out easing function
    var val = Math.easeInOutQuad(currentTime, start, change, duration);
    // move the document.body
    doc.scrollTop = val;
    move(val);
    // do the animation unless its over
    if(currentTime < duration) {
    if (currentTime < duration) {
    requestAnimFrame(animateScroll);
    } else {
    if (callback && typeof(callback) === 'function') {
  2. @james2doyle james2doyle revised this gist Dec 16, 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
    @@ -26,7 +26,7 @@ var requestAnimFrame = (function(){

    function scrollTo(to, callback, duration) {
    // figure out if this is moz || IE because they use documentElement
    var doc = (navigator.userAgent.indexOf('Firefox') != -1 || navigator.userAgent.indexOf('MSIE') != -1) ? document.documentElement : document.body,
    var doc = document.documentElement,
    start = doc.scrollTop,
    change = to - start,
    currentTime = 0,
  3. @james2doyle james2doyle revised this gist Oct 18, 2013. 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
    @@ -26,7 +26,7 @@ var requestAnimFrame = (function(){

    function scrollTo(to, callback, duration) {
    // figure out if this is moz || IE because they use documentElement
    var doc = (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') != -1) ? document.body : document.documentElement,
    var doc = (navigator.userAgent.indexOf('Firefox') != -1 || navigator.userAgent.indexOf('MSIE') != -1) ? document.documentElement : document.body,
    start = doc.scrollTop,
    change = to - start,
    currentTime = 0,
  4. @james2doyle james2doyle revised this gist Oct 18, 2013. 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
    @@ -26,7 +26,7 @@ var requestAnimFrame = (function(){

    function scrollTo(to, callback, duration) {
    // figure out if this is moz || IE because they use documentElement
    var doc = (document.documentElement.classList.contains('mozilla-firefox') || document.documentElement.classList.contains('internet-explorer')) ? document.documentElement : document.body,
    var doc = (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') != -1) ? document.body : document.documentElement,
    start = doc.scrollTop,
    change = to - start,
    currentTime = 0,
  5. @james2doyle james2doyle revised this gist Oct 17, 2013. 1 changed file with 6 additions and 9 deletions.
    15 changes: 6 additions & 9 deletions scrollTo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -21,16 +21,13 @@ Math.inOutQuintic = function(t, b, c, d) {

    // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
    var requestAnimFrame = (function(){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
    };
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
    })();

    function scrollTo(to, callback, duration) {
    var start = document.body.scrollTop,
    // figure out if this is moz || IE because they use documentElement
    var doc = (document.documentElement.classList.contains('mozilla-firefox') || document.documentElement.classList.contains('internet-explorer')) ? document.documentElement : document.body,
    start = doc.scrollTop,
    change = to - start,
    currentTime = 0,
    increment = 20;
    @@ -39,9 +36,9 @@ function scrollTo(to, callback, duration) {
    // increment the time
    currentTime += increment;
    // find the value with the quadratic in-out easing function
    var val = Math.inOutQuintic(currentTime, start, change, duration);
    var val = Math.easeInOutQuad(currentTime, start, change, duration);
    // move the document.body
    document.body.scrollTop = val;
    doc.scrollTop = val;
    // do the animation unless its over
    if(currentTime < duration) {
    requestAnimFrame(animateScroll);
  6. @james2doyle james2doyle revised this gist Sep 17, 2013. 1 changed file with 12 additions and 1 deletion.
    13 changes: 12 additions & 1 deletion scrollTo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,17 @@ Math.easeInOutQuad = function (t, b, c, d) {
    return -c/2 * (t*(t-2) - 1) + b;
    };

    Math.easeInCubic = function(t, b, c, d) {
    var tc = (t/=d)*t*t;
    return b+c*(tc);
    };

    Math.inOutQuintic = function(t, b, c, d) {
    var ts = (t/=d)*t,
    tc = ts*t;
    return b+c*(6*tc*ts + -15*ts*ts + 10*tc);
    };

    // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
    var requestAnimFrame = (function(){
    return window.requestAnimationFrame ||
    @@ -28,7 +39,7 @@ function scrollTo(to, callback, duration) {
    // increment the time
    currentTime += increment;
    // find the value with the quadratic in-out easing function
    var val = Math.easeInOutQuad(currentTime, start, change, duration);
    var val = Math.inOutQuintic(currentTime, start, change, duration);
    // move the document.body
    document.body.scrollTop = val;
    // do the animation unless its over
  7. @james2doyle james2doyle revised this gist Sep 17, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions scrollTo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,7 @@ Math.easeInOutQuad = function (t, b, c, d) {
    return -c/2 * (t*(t-2) - 1) + b;
    };

    // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
    var requestAnimFrame = (function(){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
  8. @james2doyle james2doyle revised this gist Sep 17, 2013. 1 changed file with 21 additions and 11 deletions.
    32 changes: 21 additions & 11 deletions scrollTo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,5 @@
    // easing functions http://goo.gl/5HLl8
    Math.easeInOutQuad = function (t, b, c, d) {
    //t = current time
    //b = start value
    //c = change in value
    //d = duration
    t /= d/2;
    if (t < 1) {
    return c/2*t*t + b
    @@ -12,23 +8,37 @@ Math.easeInOutQuad = function (t, b, c, d) {
    return -c/2 * (t*(t-2) - 1) + b;
    };

    function scrollTo(element, to, duration) {
    var start = element.scrollTop,
    var requestAnimFrame = (function(){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
    };
    })();

    function scrollTo(to, callback, duration) {
    var start = document.body.scrollTop,
    change = to - start,
    currentTime = 0,
    increment = 20;
    duration = (typeof(duration) === 'undefined') ? 500: duration;
    var animateScroll = function(){
    // increment the time
    currentTime += increment;
    // find the value with the quadratic in-out easing function
    var val = Math.easeInOutQuad(currentTime, start, change, duration);
    // move the element
    element.scrollTop = val;
    // move the document.body
    document.body.scrollTop = val;
    // do the animation unless its over
    if(currentTime < duration) {
    setTimeout(animateScroll, increment);
    requestAnimFrame(animateScroll);
    } else {
    if (callback && typeof(callback) === 'function') {
    // the animation is done so lets callback
    callback();
    }
    }
    };
    animateScroll();
    }
    // scrollTo(document.body, 0, 500);
    }
  9. @james2doyle james2doyle created this gist Jun 2, 2013.
    34 changes: 34 additions & 0 deletions scrollTo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    // easing functions http://goo.gl/5HLl8
    Math.easeInOutQuad = function (t, b, c, d) {
    //t = current time
    //b = start value
    //c = change in value
    //d = duration
    t /= d/2;
    if (t < 1) {
    return c/2*t*t + b
    }
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
    };

    function scrollTo(element, to, duration) {
    var start = element.scrollTop,
    change = to - start,
    currentTime = 0,
    increment = 20;
    var animateScroll = function(){
    // increment the time
    currentTime += increment;
    // find the value with the quadratic in-out easing function
    var val = Math.easeInOutQuad(currentTime, start, change, duration);
    // move the element
    element.scrollTop = val;
    // do the animation unless its over
    if(currentTime < duration) {
    setTimeout(animateScroll, increment);
    }
    };
    animateScroll();
    }
    // scrollTo(document.body, 0, 500);