3 * Copyright (c) 2007 Ariel Flesler - aflesler ○ gmail • com | https://github.com/flesler
5 * https://github.com/flesler/jquery.scrollTo
6 * @projectDescription Lightweight, cross-browser and highly customizable animated scrolling with jQuery
7 * @author Ariel Flesler
12 if (typeof define === 'function' && define.amd) {
14 define(['jquery'], factory);
15 } else if (typeof module !== 'undefined' && module.exports) {
17 module.exports = factory(require('jquery'));
25 var $scrollTo = $.scrollTo = function(target, duration, settings) {
26 return $(window).scrollTo(target, duration, settings);
29 $scrollTo.defaults = {
35 function isWin(elem) {
36 return !elem.nodeName ||
37 $.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) !== -1;
40 function isFunction(obj) {
41 // Brought from jQuery since it's deprecated
42 return typeof obj === 'function'
45 $.fn.scrollTo = function(target, duration, settings) {
46 if (typeof duration === 'object') {
50 if (typeof settings === 'function') {
51 settings = { onAfter:settings };
53 if (target === 'max') {
57 settings = $.extend({}, $scrollTo.defaults, settings);
58 // Speed is still recognized for backwards compatibility
59 duration = duration || settings.duration;
60 // Make sure the settings are given right
61 var queue = settings.queue && settings.axis.length > 1;
63 // Let's keep the overall duration
66 settings.offset = both(settings.offset);
67 settings.over = both(settings.over);
69 return this.each(function() {
70 // Null target yields nothing, just like jQuery does
71 if (target === null) return;
73 var win = isWin(this),
74 elem = win ? this.contentWindow || window : this,
80 switch (typeof targ) {
81 // A number will pass the regex
84 if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
89 // Relative/Absolute selector
90 targ = win ? $(targ) : $(targ, elem);
93 if (targ.length === 0) return;
94 // DOMElement / jQuery
95 if (targ.is || targ.style) {
96 // Get the real position of the target
97 toff = (targ = $(targ)).offset();
101 var offset = isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset;
103 $.each(settings.axis.split(''), function(i, axis) {
104 var Pos = axis === 'x' ? 'Left' : 'Top',
105 pos = Pos.toLowerCase(),
106 key = 'scroll' + Pos,
108 max = $scrollTo.max(elem, axis);
110 if (toff) {// jQuery / DOMElement
111 attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]);
113 // If it's a dom element, reduce the margin
114 if (settings.margin) {
115 attr[key] -= parseInt(targ.css('margin'+Pos), 10) || 0;
116 attr[key] -= parseInt(targ.css('border'+Pos+'Width'), 10) || 0;
119 attr[key] += offset[pos] || 0;
121 if (settings.over[pos]) {
122 // Scroll to a fraction of its width/height
123 attr[key] += targ[axis === 'x'?'width':'height']() * settings.over[pos];
127 // Handle percentage values
128 attr[key] = val.slice && val.slice(-1) === '%' ?
129 parseFloat(val) / 100 * max
133 // Number or 'number'
134 if (settings.limit && /^\d+$/.test(attr[key])) {
136 attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max);
139 // Don't waste time animating, if there's no need.
140 if (!i && settings.axis.length > 1) {
141 if (prev === attr[key]) {
142 // No animation needed
145 // Intermediate animation
146 animate(settings.onAfterFirst);
147 // Don't animate this axis again in the next iteration.
153 animate(settings.onAfter);
155 function animate(callback) {
156 var opts = $.extend({}, settings, {
157 // The queue setting conflicts with animate()
158 // Force it to always be true
161 complete: callback && function() {
162 callback.call(elem, targ, settings);
165 $elem.animate(attr, opts);
170 // Max scrolling position, works on quirks mode
171 // It only fails (not too badly) on IE, quirks mode.
172 $scrollTo.max = function(elem, axis) {
173 var Dim = axis === 'x' ? 'Width' : 'Height',
174 scroll = 'scroll'+Dim;
177 return elem[scroll] - $(elem)[Dim.toLowerCase()]();
179 var size = 'client' + Dim,
180 doc = elem.ownerDocument || elem.document,
181 html = doc.documentElement,
184 return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]);
188 return isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val };
191 // Add special hooks so that window scroll properties can be animated
192 $.Tween.propHooks.scrollLeft =
193 $.Tween.propHooks.scrollTop = {
195 return $(t.elem)[t.prop]();
198 var curr = this.get(t);
199 // If interrupt is true and user scrolled, stop animating
200 if (t.options.interrupt && t._last && t._last !== curr) {
201 return $(t.elem).stop();
203 var next = Math.round(t.now);
205 // Browsers don't render floating point scroll
207 $(t.elem)[t.prop](next);
208 t._last = this.get(t);