jquery.scrollTo.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /*!
  2. * jQuery.scrollTo
  3. * Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
  4. * Licensed under MIT
  5. * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
  6. * @projectDescription Easy element scrolling using jQuery.
  7. * @author Ariel Flesler
  8. * @version 2.1.0
  9. */
  10. ;(function(define) {
  11. 'use strict';
  12. define(['jquery'], function($) {
  13. var $scrollTo = $.scrollTo = function(target, duration, settings) {
  14. return $(window).scrollTo(target, duration, settings);
  15. };
  16. $scrollTo.defaults = {
  17. axis:'xy',
  18. duration: 0,
  19. limit:true
  20. };
  21. function isWin(elem) {
  22. return !elem.nodeName ||
  23. $.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) !== -1;
  24. }
  25. $.fn.scrollTo = function(target, duration, settings) {
  26. if (typeof duration === 'object') {
  27. settings = duration;
  28. duration = 0;
  29. }
  30. if (typeof settings === 'function') {
  31. settings = { onAfter:settings };
  32. }
  33. if (target === 'max') {
  34. target = 9e9;
  35. }
  36. settings = $.extend({}, $scrollTo.defaults, settings);
  37. // Speed is still recognized for backwards compatibility
  38. duration = duration || settings.duration;
  39. // Make sure the settings are given right
  40. var queue = settings.queue && settings.axis.length > 1;
  41. if (queue) {
  42. // Let's keep the overall duration
  43. duration /= 2;
  44. }
  45. settings.offset = both(settings.offset);
  46. settings.over = both(settings.over);
  47. return this.each(function() {
  48. // Null target yields nothing, just like jQuery does
  49. if (target === null) return;
  50. var win = isWin(this),
  51. elem = win ? this.contentWindow || window : this,
  52. $elem = $(elem),
  53. targ = target,
  54. attr = {},
  55. toff;
  56. switch (typeof targ) {
  57. // A number will pass the regex
  58. case 'number':
  59. case 'string':
  60. if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
  61. targ = both(targ);
  62. // We are done
  63. break;
  64. }
  65. // Relative/Absolute selector
  66. targ = win ? $(targ) : $(targ, elem);
  67. if (!targ.length) return;
  68. /* falls through */
  69. case 'object':
  70. // DOMElement / jQuery
  71. if (targ.is || targ.style) {
  72. // Get the real position of the target
  73. toff = (targ = $(targ)).offset();
  74. }
  75. }
  76. var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset;
  77. $.each(settings.axis.split(''), function(i, axis) {
  78. var Pos = axis === 'x' ? 'Left' : 'Top',
  79. pos = Pos.toLowerCase(),
  80. key = 'scroll' + Pos,
  81. prev = $elem[key](),
  82. max = $scrollTo.max(elem, axis);
  83. if (toff) {// jQuery / DOMElement
  84. attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]);
  85. // If it's a dom element, reduce the margin
  86. if (settings.margin) {
  87. attr[key] -= parseInt(targ.css('margin'+Pos), 10) || 0;
  88. attr[key] -= parseInt(targ.css('border'+Pos+'Width'), 10) || 0;
  89. }
  90. attr[key] += offset[pos] || 0;
  91. if (settings.over[pos]) {
  92. // Scroll to a fraction of its width/height
  93. attr[key] += targ[axis === 'x'?'width':'height']() * settings.over[pos];
  94. }
  95. } else {
  96. var val = targ[pos];
  97. // Handle percentage values
  98. attr[key] = val.slice && val.slice(-1) === '%' ?
  99. parseFloat(val) / 100 * max
  100. : val;
  101. }
  102. // Number or 'number'
  103. if (settings.limit && /^\d+$/.test(attr[key])) {
  104. // Check the limits
  105. attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max);
  106. }
  107. // Don't waste time animating, if there's no need.
  108. if (!i && settings.axis.length > 1) {
  109. if (prev === attr[key]) {
  110. // No animation needed
  111. attr = {};
  112. } else if (queue) {
  113. // Intermediate animation
  114. animate(settings.onAfterFirst);
  115. // Don't animate this axis again in the next iteration.
  116. attr = {};
  117. }
  118. }
  119. });
  120. animate(settings.onAfter);
  121. function animate(callback) {
  122. var opts = $.extend({}, settings, {
  123. // The queue setting conflicts with animate()
  124. // Force it to always be true
  125. queue: true,
  126. duration: duration,
  127. complete: callback && function() {
  128. callback.call(elem, targ, settings);
  129. }
  130. });
  131. $elem.animate(attr, opts);
  132. }
  133. });
  134. };
  135. // Max scrolling position, works on quirks mode
  136. // It only fails (not too badly) on IE, quirks mode.
  137. $scrollTo.max = function(elem, axis) {
  138. var Dim = axis === 'x' ? 'Width' : 'Height',
  139. scroll = 'scroll'+Dim;
  140. if (!isWin(elem))
  141. return elem[scroll] - $(elem)[Dim.toLowerCase()]();
  142. var size = 'client' + Dim,
  143. doc = elem.ownerDocument || elem.document,
  144. html = doc.documentElement,
  145. body = doc.body;
  146. return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]);
  147. };
  148. function both(val) {
  149. return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val };
  150. }
  151. // Add special hooks so that window scroll properties can be animated
  152. $.Tween.propHooks.scrollLeft =
  153. $.Tween.propHooks.scrollTop = {
  154. get: function(t) {
  155. return $(t.elem)[t.prop]();
  156. },
  157. set: function(t) {
  158. var curr = this.get(t);
  159. // If interrupt is true and user scrolled, stop animating
  160. if (t.options.interrupt && t._last && t._last !== curr) {
  161. return $(t.elem).stop();
  162. }
  163. var next = Math.round(t.now);
  164. // Don't waste CPU
  165. // Browsers don't render floating point scroll
  166. if (curr !== next) {
  167. $(t.elem)[t.prop](next);
  168. t._last = this.get(t);
  169. }
  170. }
  171. };
  172. // AMD requirement
  173. return $scrollTo;
  174. });
  175. }(typeof define === 'function' && define.amd ? define : function(deps, factory) {
  176. 'use strict';
  177. if (typeof module !== 'undefined' && module.exports) {
  178. // Node
  179. module.exports = factory(require('jquery'));
  180. } else {
  181. factory(jQuery);
  182. }
  183. }));