├── bower.json
├── README.rdoc
├── jquery.scrollIntoView.min.js
└── jquery.scrollIntoView.js


/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jQuery.scrollIntoView",
 3 |   "version": "0.3.0",
 4 |   "authors": [
 5 |     "Arwid Bancewicz <arwid@arwid.ca"
 6 |   ],
 7 |   "main": "jquery.scrollIntoView.min.js",
 8 |   "homepage": "https://github.com/Arwid/jQuery.scrollIntoView",
 9 |   "description": "jQuery plugin to smoothly scroll elements into view.",
10 |   "license": "MIT"
11 | }


--------------------------------------------------------------------------------
/README.rdoc:
--------------------------------------------------------------------------------
 1 | = jQuery.scrollIntoView
 2 | 
 3 | author:: Arwid Bancewicz http://arwid.ca
 4 | version:: 0.3
 5 | updated:: 8 Jan 2013
 6 | 
 7 | Similar to the default browser scrollIntoView, this jQuery plugin scrolls an element into view to the top or bottom of its container but not if it's already visible. The demo page is here http://arwid.github.com/jQuery.scrollIntoView/.
 8 | 
 9 | = Usage
10 | An animated scroll:
11 |   $("#some_element").scrollIntoView();
12 | 
13 | No animation:
14 |   $("#some_element").scrollIntoView(false);
15 |   
16 | Configure the animation (same options as in jQuery animate()):
17 |   $("#some_element").scrollIntoView(250, "easeOutExpo", function() { alert("done scroll!") });
18 | 
19 |   $("#some_element").scrollIntoView({
20 |     duration: true,
21 |     easing:'easeOutExpo',
22 |     complete: $.noop(),
23 |     step: $.noop(),
24 |     queue: false,
25 |     specialEasing: null
26 |   });
27 | Same for multiple elements:
28 |   $(".some_elements").scrollIntoView();
29 | 
30 | * Refer to http://api.jquery.com/animate/ for a description of the options.
31 | * By default the animation easing will be 'easeOutExpo' if jQuery UI Effects is included before this file. Otherwise, it'll use jQuery's default 'swing' easing which isn't great. So make sure to download Effects Core from http://jqueryui.com/download and include it before this file for a better animation.
32 | 
33 | = Also Included
34 | 
35 | Also included is a utility method isOutOfView that works for multiple elements:
36 |   $(".some_elements").isOutOfView()
37 |   
38 | Or for completely out of view:
39 |   $(".some_elements").isOutOfView(true)
40 | 
41 | Also included is a utility called commonAncestor which returns the common ancestor of elements:
42 |   $(".some_elements").commonAncestor()
43 | = License
44 | 
45 | jQuery.scrollIntoView is covered by the MIT License.


--------------------------------------------------------------------------------
/jquery.scrollIntoView.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * $.fn.scrollIntoView - similar to the default browser scrollIntoView
 3 |  * The default browser behavior always places the element at the top or bottom of its container. 
 4 |  * This override is smart enough to not scroll if the element is already visible.
 5 |  *
 6 |  * Copyright 2011 Arwid Bancewicz
 7 |  * Licensed under the MIT license
 8 |  * http://www.opensource.org/licenses/mit-license.php
 9 |  * 
10 |  * @date 8 Jan 2013
11 |  * @author Arwid Bancewicz http://arwid.ca
12 |  * @version 0.3
13 |  */
14 | (function(a){a.fn.scrollIntoView=function(f,j,c){var b=a.extend({},a.fn.scrollIntoView.defaults);if(a.type(f)=="object"){a.extend(b,f)}else{if(a.type(f)=="number"){a.extend(b,{duration:f,easing:j,complete:c})}else{if(f==false){b.smooth=false}}}var h=Infinity,e=0;if(this.size()==1){((h=this.get(0).offsetTop)==null||(e=h+this.get(0).offsetHeight))}else{this.each(function(m,n){(n.offsetTop<h?h=n.offsetTop:n.offsetTop+n.offsetHeight>e?e=n.offsetTop+n.offsetHeight:null)})}e-=h;var k=this.commonAncestor().get(0);var g=a(window).height();while(k){var d=k.scrollTop,l=k.clientHeight;if(l>g){l=g}if(l==0&&k.tagName=="BODY"){l=g}if((k.scrollTop!=((k.scrollTop+=1)==null||k.scrollTop)&&(k.scrollTop-=1)!=null)||(k.scrollTop!=((k.scrollTop-=1)==null||k.scrollTop)&&(k.scrollTop+=1)!=null)){if(h<=d){i(k,h)}else{if((h+e)>(d+l)){i(k,h+e-l)}else{i(k,undefined)}}return}k=k.parentNode}function i(n,m){if(m===undefined){if(a.isFunction(b.complete)){b.complete.call(n)}}else{if(b.smooth){a(n).stop().animate({scrollTop:m},b)}else{n.scrollTop=m;if(a.isFunction(b.complete)){b.complete.call(n)}}}}return this};a.fn.scrollIntoView.defaults={smooth:true,duration:null,easing:a.easing&&a.easing.easeOutExpo?"easeOutExpo":null,complete:a.noop(),step:null,specialEasing:{}};a.fn.isOutOfView=function(b){var c=true;this.each(function(){var h=this.parentNode,d=h.scrollTop,g=h.clientHeight,f=this.offsetTop,e=this.offsetHeight;if(b?(f)>(d+g):(f+e)>(d+g)){}else{if(b?(f+e)<d:f<d){}else{c=false}}});return c};a.fn.commonAncestor=function(){var c=[];var f=Infinity;a(this).each(function(){var g=a(this).parents();c.push(g);f=Math.min(f,g.length)});for(var d=0;d<c.length;d++){c[d]=c[d].slice(c[d].length-f)}for(var d=0;d<c[0].length;d++){var e=true;for(var b in c){if(c[b][d]!=c[0][d]){e=false;break}}if(e){return a(c[0][d])}}return a([])}})(jQuery);


--------------------------------------------------------------------------------
/jquery.scrollIntoView.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * $.fn.scrollIntoView - similar to the default browser scrollIntoView
  3 |  * The default browser behavior always places the element at the top or bottom of its container. 
  4 |  * This override is smart enough to not scroll if the element is already visible.
  5 |  *
  6 |  * Copyright 2011 Arwid Bancewicz
  7 |  * Licensed under the MIT license
  8 |  * http://www.opensource.org/licenses/mit-license.php
  9 |  * 
 10 |  * @date 8 Jan 2013
 11 |  * @author Arwid Bancewicz http://arwid.ca
 12 |  * @version 0.3
 13 |  */
 14 |  (function($) {
 15 |     $.fn.scrollIntoView = function(duration, easing, complete) {
 16 |         // The arguments are optional.
 17 |         // The first argment can be false for no animation or a duration.
 18 |         // The first argment could also be a map of options.
 19 |         // Refer to http://api.jquery.com/animate/.
 20 |         var opts = $.extend({},
 21 |         $.fn.scrollIntoView.defaults);
 22 | 
 23 |         // Get options
 24 |         if ($.type(duration) == "object") {
 25 |             $.extend(opts, duration);
 26 |         } else if ($.type(duration) == "number") {
 27 |             $.extend(opts, { duration: duration, easing: easing, complete: complete });
 28 |         } else if (duration == false) {
 29 |             opts.smooth = false;
 30 |         }
 31 | 
 32 |         // get enclosing offsets
 33 |         var elY = Infinity, elH = 0;
 34 |         if (this.size()==1)((elY=this.get(0).offsetTop)==null||(elH=elY+this.get(0).offsetHeight));
 35 |         else this.each(function(i,el){(el.offsetTop<elY?elY=el.offsetTop:el.offsetTop+el.offsetHeight>elH?elH=el.offsetTop+el.offsetHeight:null)});
 36 |         elH -= elY;
 37 | 
 38 |         // start from the common ancester
 39 |         var pEl = this.commonAncestor().get(0);
 40 | 
 41 |         var wH = $(window).height();
 42 |         
 43 |         // go up parents until we find one that scrolls
 44 |         while (pEl) {
 45 |             var pY = pEl.scrollTop, pH = pEl.clientHeight;
 46 |             if (pH > wH) pH = wH;
 47 |             
 48 |             // case: if body's elements are all absolutely/fixed positioned, use window height
 49 |             if (pH == 0 && pEl.tagName == "BODY") pH = wH;
 50 |             
 51 |             if (
 52 |             // it wiggles?
 53 |             (pEl.scrollTop != ((pEl.scrollTop += 1) == null || pEl.scrollTop) && (pEl.scrollTop -= 1) != null) ||
 54 |             (pEl.scrollTop != ((pEl.scrollTop -= 1) == null || pEl.scrollTop) && (pEl.scrollTop += 1) != null)) {
 55 |                 if (elY <= pY) scrollTo(pEl, elY); // scroll up
 56 |                 else if ((elY + elH) > (pY + pH)) scrollTo(pEl, elY + elH - pH); // scroll down
 57 |                 else scrollTo(pEl, undefined) // no scroll
 58 |                 return;
 59 |             }
 60 | 
 61 |             // try next parent
 62 |             pEl = pEl.parentNode;
 63 |         }
 64 | 
 65 |         function scrollTo(el, scrollTo) {
 66 |             if (scrollTo === undefined) {
 67 |                 if ($.isFunction(opts.complete)) opts.complete.call(el);
 68 |             } else if (opts.smooth) {
 69 |                 $(el).stop().animate({ scrollTop: scrollTo }, opts);
 70 |             } else {
 71 |                 el.scrollTop = scrollTo;
 72 |                 if ($.isFunction(opts.complete)) opts.complete.call(el);
 73 |             }
 74 |         }
 75 |         return this;
 76 |     };
 77 | 
 78 |     $.fn.scrollIntoView.defaults = {
 79 |         smooth: true,
 80 |         duration: null,
 81 |         easing: $.easing && $.easing.easeOutExpo ? 'easeOutExpo': null,
 82 |         // Note: easeOutExpo requires jquery.effects.core.js
 83 |         //       otherwise jQuery will default to use 'swing'
 84 |         complete: $.noop(),
 85 |         step: null,
 86 |         specialEasing: {} // cannot be null in jQuery 1.8.3
 87 |     };
 88 | 
 89 |     /*
 90 |      Returns whether the elements are in view
 91 |     */
 92 |     $.fn.isOutOfView = function(completely) {
 93 |         // completely? whether element is out of view completely
 94 |         var outOfView = true;
 95 |         this.each(function() {
 96 |             var pEl = this.parentNode, pY = pEl.scrollTop, pH = pEl.clientHeight, elY = this.offsetTop, elH = this.offsetHeight;
 97 |             if (completely ? (elY) > (pY + pH) : (elY + elH) > (pY + pH)) {}
 98 |             else if (completely ? (elY + elH) < pY: elY < pY) {}
 99 |             else outOfView = false;
100 |         });
101 |         return outOfView;
102 |     };
103 | 
104 |     /*
105 |      Returns the common ancestor of the elements.
106 |      It was taken from http://stackoverflow.com/questions/3217147/jquery-first-parent-containing-all-children
107 |      It has received minimal testing.
108 |     */
109 |     $.fn.commonAncestor = function() {
110 |         var parents = [];
111 |         var minlen = Infinity;
112 | 
113 |         $(this).each(function() {
114 |             var curparents = $(this).parents();
115 |             parents.push(curparents);
116 |             minlen = Math.min(minlen, curparents.length);
117 |         });
118 | 
119 |         for (var i = 0; i < parents.length; i++) {
120 |             parents[i] = parents[i].slice(parents[i].length - minlen);
121 |         }
122 | 
123 |         // Iterate until equality is found
124 |         for (var i = 0; i < parents[0].length; i++) {
125 |             var equal = true;
126 |             for (var j in parents) {
127 |                 if (parents[j][i] != parents[0][i]) {
128 |                     equal = false;
129 |                     break;
130 |                 }
131 |             }
132 |             if (equal) return $(parents[0][i]);
133 |         }
134 |         return $([]);
135 |     }
136 | 
137 | })(jQuery);


--------------------------------------------------------------------------------