1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
/**
* jQuery.ScrollTo
* Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com
* Licensed under GPL license (http://www.opensource.org/licenses/gpl-license.php).
* Date: 1/2/2008
*
* @projectDescription Easy element scrolling using jQuery.
* Tested with jQuery 1.2.1. On FF 2.0.0.11, IE 6, Opera 9.22 and Safari 3 beta. on Windows.
*
* @author Ariel Flesler
* @version 1.3
*
* @id jQuery.scrollTo
* @id jQuery.fn.scrollTo
* @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements.
* The different options for target are:
* - A number position (will be applied to all axes).
* - A string position ('44', '100px', '+=90', etc ) will be applied to all axes
* - A jQuery/DOM element ( logically, child of the element to scroll )
* - A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc )
* - A hash { top:x, left:y }, x and y can be any kind of number/string like above.
* @param {Number} duration The OVERALL length of the animation, this argument can be the settings object instead.
* @param {Object} settings Hash of settings, optional.
* @option {String} axis Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'.
* @option {Number} duration The OVERALL length of the animation.
* @option {String} easing The easing method for the animation.
* @option {Boolean} margin If true, the margin of the target element will be deducted from the final position.
* @option {Object, Number} offset Add/deduct from the end position. One number for both axis or { top:x, left:y }
* @option {Boolean} queue If true, and both axis are given, the 2nd axis will only be animated after the first one ends.
* @option {Function} onAfter Function to be called after the scrolling ends.
* @option {Function} onAfterFirst If queuing is activated, this function will be called after the first scrolling ends.
* @return {jQuery} Returns the same jQuery object, for chaining.
*
* @example $('div').scrollTo( 340 );
*
* @example $('div').scrollTo( '+=340px', { axis:'y' } );
*
* @example $('div').scrollTo( 'p.paragraph:eq(2)', 500, { easing:'swing', queue:true, axis:'xy' } );
*
* @example var second_child = document.getElementById('container').firstChild.nextSibling;
* $('#container').scrollTo( second_child, { duration:500, axis:'x', onAfter:function(){
* alert('scrolled!!');
* }});
*
* @example $('div').scrollTo( { top: 300, left:'+=200' }, { offset:-20 } );
*
* Notes:
* - jQuery.scrollTo will make the whole window scroll, it accepts the same parameters as jQuery.fn.scrollTo.
* - The plugin no longer requires Dimensions.
* - If you are interested in animated anchor navigation, check http://jquery.com/plugins/project/LocalScroll.
* - The option 'margin' won't be valid, if the target is not a jQuery object or a DOM element.
* - The option 'queue' won't be taken into account, if only 1 axis is given.
*/
;(function( $ ){
$.scrollTo = function( target, duration, settings ){
$( $.browser.safari ? 'body' : 'html' ).scrollTo( target, duration, settings );
};
$.scrollTo.defaults = {
axis:'y',
duration:1
};
$.fn.scrollTo = function( target, duration, settings ){
if( typeof duration == 'object' ){
settings = duration;
duration = 0;
}
settings = $.extend( {}, $.scrollTo.defaults, settings );
if( !duration )
duration = settings.speed || settings.duration;//backward compatibility fix
settings.queue = settings.queue && settings.axis.length == 2;//make sure the settings are given right
if( settings.queue )
duration = Math.ceil( duration / 2 );//let's keep the overall speed, the same.
if( typeof settings.offset == 'number' )
settings.offset = { left: settings.offset, top: settings.offset };
return this.each(function(){
var elem = this, $elem = $(elem),
t = target, toff, attr = {},
win = $elem.is('html,body');
switch( typeof t ){
case 'number'://will pass the regex
case 'string':
if( /^([+-]=)?\d+(px)?$/.test(t) ){
t = { top:t, left:t };
break;//we are done
}
t = $(t,this);// relative selector, no break!
case 'object':
if( t.is || t.style )//DOM/jQuery
toff = (t = $(t)).offset();//get the real position of the target
}
$.each( settings.axis.split(''), parse );
animate( settings.onAfter );
function parse( i, axis ){
var Pos = axis == 'x' ? 'Left' : 'Top',
pos = Pos.toLowerCase(),
key = 'scroll' + Pos,
act = elem[key];
if( toff ){//jQuery/DOM
attr[key] = toff[pos] + ( win ? 0 : act - $elem.offset()[pos] );
if( settings.margin ){//if it's a dom element, reduce the margin
attr[key] -= parseInt(t.css('margin'+Pos)) || 0;
attr[key] -= parseInt(t.css('border'+Pos+'Width')) || 0;
}
if( settings.offset && settings.offset[pos] )
attr[key] += settings.offset[pos];
}else{
attr[key] = t[pos];
}
if( /^\d+$/.test(attr[key]) )
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max(axis) );//check the limits
if( !i && settings.queue ){//queueing each axis is required
if( act != attr[key] )//don't waste time animating, if there's no need.
animate( settings.onAfterFirst );//intermediate animation
delete attr[key];//don't animate this axis again in the next iteration.
}
};
function animate( callback ){
$elem.animate( attr, duration, settings.easing, function(){
if( callback )
callback.call(this, $elem, attr, t );
});
};
function max( axis ){
var el = win ? $.browser.opera ? document.body : document.documentElement : elem,
Dim = axis == 'x' ? 'Width' : 'Height';
return el['scroll'+Dim] - el['client'+Dim];
};
});
};
})( jQuery );
|
