Skip to content

Instantly share code, notes, and snippets.

@vitorjustin
Last active August 29, 2015 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vitorjustin/ef4f5134840e04a2bf38 to your computer and use it in GitHub Desktop.
Save vitorjustin/ef4f5134840e04a2bf38 to your computer and use it in GitHub Desktop.
scroll to snippet without framework dependency using requestAnimationFrame
;(function(window, document, undefined) {
// rAF polyfill
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
var _isIE = function (obj) {
return navigator.userAgent.toLowerCase().indexOf('msie') !== -1 || navigator.userAgent.toLowerCase().indexOf('trident') !== -1;
};
var _isFirefox = function(){
return typeof InstallTrigger !== 'undefined';
};
var easing = {
// no easing, no acceleration
linear: function (t) { return t; },
// accelerating from zero velocity
easeInQuad: function (t) { return t*t; },
// decelerating to zero velocity
easeOutQuad: function (t) { return t*(2-t); },
// acceleration until halfway, then deceleration
easeInOutQuad: function (t) { return t<0.5 ? 2*t*t : -1+(4-2*t)*t; },
// accelerating from zero velocity
easeInCubic: function (t) { return t*t*t; },
// decelerating to zero velocity
easeOutCubic: function (t) { return (--t)*t*t+1; },
// acceleration until halfway, then deceleration
easeInOutCubic: function (t) { return t<0.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; },
// accelerating from zero velocity
easeInQuart: function (t) { return t*t*t*t; },
// decelerating to zero velocity
easeOutQuart: function (t) { return 1-(--t)*t*t*t; },
// acceleration until halfway, then deceleration
easeInOutQuart: function (t) { return t<0.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; },
// accelerating from zero velocity
easeInQuint: function (t) { return t*t*t*t*t; },
// decelerating to zero velocity
easeOutQuint: function (t) { return 1+(--t)*t*t*t*t; },
// acceleration until halfway, then deceleration
easeInOutQuint: function (t) { return t<0.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; }
};
function scrollTo(Y, duration, easingFunction, callback) {
var start = Date.now(),
elem = document.documentElement.scrollTop ? document.documentElement : document.body,
from = elem.scrollTop;
if (_isIE()) {
elem = document.documentElement;
}
if (_isFirefox()) {
elem = document.documentElement;
}
callback = typeof callback === 'function' ? callback : noop;
if(from === Y) {
callback();
return; /* Prevent scrolling to the Y point if already there */
}
function min(a,b) {
return a<b?a:b;
}
function scroll(timestamp) {
var currentTime = Date.now(),
time = min(1, ((currentTime - start) / duration)),
easedT = easingFunction !== undefined ? easingFunction(time) : time;
elem.scrollTop = (easedT * (Y - from)) + from;
if(time < 1) {
requestAnimationFrame(scroll);
} else {
if(callback) {
callback();
}
}
}
requestAnimationFrame(scroll);
};
window.scrollTo = scrollTo;
})(window, document);
@vitorjustin
Copy link
Author

The script logic was not developed by me, but I could not find the place where I got the code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment