/jquery.scrollTo

Permalink
Browse files

Implemented interrupt setting (#67) 

Expanded the demo with more settings
Renamed CHANGELOG
Updated ignore fields
Updated package.json to comply with jquery plugins standard
  • Loading branch information...
1 parent cfcb4d2 commit 0ecaf7cb5705b2b1e4e5bcdd339134ab5c069e7f @flesler committed Mar 18, 2015
Unified Split
Showing with 47 additions and 16 deletions.
  1. +6 −0 changes.txt → CHANGELOG
  2. +4 −4 bower.json
  3. +17 −3 demo/index.html
  4. +12 −4 jquery.scrollTo.js
  5. +2 −2 jquery.scrollTo.min.js
  6. +6 −3 package.json
View
6 changes.txt → CHANGELOG
@@ -1,3 +1,9 @@
+2.1.0
+[Enhancement]
+- Avoid animating a needless axis
+[Feature]
+- Implemented interrupt setting, if true will stop animating on user (manual) scroll (#67)
+
2.0.1
[Fix]
- Fixed "queue" setting conflicts with $().animate(), forced to always get there as true
View
8 bower.json
@@ -1,6 +1,6 @@
{
"name": "jquery.scrollTo",
- "version": "2.0.1",
+ "version": "2.1.0",
"description": "Easy element scrolling using jQuery.",
"homepage": "https://github.com/flesler/jquery.scrollTo",
"main": [
@@ -10,10 +10,10 @@
"**/.*",
"demo",
"tests",
- "changes.txt",
+ "CHANGELOG",
+ "README.md",
"composer.json",
- "package.json",
- "scrollTo.jquery.json"
+ "package.json"
],
"dependencies": {
"jquery": ">=1.8"
View
20 demo/index.html
@@ -131,6 +131,9 @@
$('#settings-over-hash').click(function() {
$settings.scrollTo('li:eq(15)', 1000, { over:{ top:0.2, left:-0.5 } });
});
+ $('#settings-interrupt').click(function() {
+ $settings.scrollTo('li:eq(15)', 10000, { interrupt:true });
+ });
$('#settings-queue').click(function() {//in this case, having 'axis' as 'xy' or 'yx' matters.
$settings.scrollTo('li:eq(15)', 2000, { queue:true });
});
@@ -153,10 +156,19 @@
});
});
$('#settings-step').click(function() {
- $settings.scrollTo('li:eq(15)', 2000, {step:function() {} });
+ $settings.scrollTo('li:eq(15)', 2000, {step:function(now) {
+ $('#settings-message').text(now.toFixed(2));
+ }});
});
$('#settings-progress').click(function() {
- $settings.scrollTo('li:eq(15)', 2000, {progress:function() {} });
+ $settings.scrollTo('li:eq(15)', 2000, {progress:function(_, now) {
+ $('#settings-message').text(Math.round(now*100) + '%');
+ }});
+ });
+ $('#settings-fail').click(function() {
+ $settings.scrollTo('li:eq(15)', 10000, {interrupt:true, fail:function() {
+ $('#settings-message').text('Scroll interrupted!');
+ }});
});
});
</script>
@@ -216,16 +228,18 @@
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {offset: function() { return {top:-30, left:-5}; }});" id="settings-offset-function" href="#">offset(function)</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {over:0.5});//add or deduct a fraction of its height/width" id="settings-over" href="#">over</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {over:{top:0.2, left:-0.5});" id="settings-over-hash" href="#">over(hash)</a></li>
- <li><a title="$(...).scrollTo('li:eq(15)', 1600, {queue:true});//scroll one axis, then the other" id="settings-queue" href="#">queue</a></li>
+ <li><a title="Scroll manually to interrupt the animation" id="settings-interrupt" href="#">interrupt</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1600, {onAfter:function() { } });//called after the scrolling ends" id="settings-onAfter" href="#">onAfter</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1600, {queue:true, onAfterFirst:function() { } });//called after the first axis scrolled" id="settings-onAfterFirst" href="#">onAfterFirst</a></li>
</ul>
<h4>Settings inherited from <a href="http://api.jquery.com/animate/#animate-properties-options" target="_blank">$().animate()</a></h4>
<ul class="links">
<li><a title="$(...).scrollTo('li:eq(15)', {duration:3000});//another way of calling the plugin" id="settings-duration" href="#">duration</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 2500, {easing:'elasout'});//specify an easing equation" id="settings-easing" href="#">easing</a></li>
+ <li><a title="$(...).scrollTo('li:eq(15)', 1600, {queue:true});//scroll one axis, then the other" id="settings-queue" href="#">queue</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 2500, {step:function() { }'});//specify a step function" id="settings-step" href="#">step</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 2500, {progress:function() { }'});//specify a progress function" id="settings-progress" href="#">progress</a></li>
+ <li><a title="Scroll manually to interrupt and trigger the callback" id="settings-fail" href="#">fail</a></li>
<li><a href="http://api.jquery.com/animate/#animate-properties-options" target="_blank">more</a></li>
</ul>
<div id="pane-settings" class="pane">
View
16 jquery.scrollTo.js
@@ -5,7 +5,7 @@
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
* @projectDescription Easy element scrolling using jQuery.
* @author Ariel Flesler
- * @version 2.0.1
+ * @version 2.1.0
*/
;(function(define) {
'use strict';
@@ -179,9 +179,17 @@
return $(t.elem)[t.prop]();
},
set: function(t) {
- var v = Math.round(t.now);
- if (this.get(t) !== v) {
- $(t.elem)[t.prop](v);
+ var curr = this.get(t);
+ // If interrupt is true and user scrolled, stop animating
+ if (t.options.interrupt && t._last && t._last !== curr) {
+ return $(t.elem).stop();
+ }
+ var next = Math.round(t.now);
+ // Don't waste CPU
+ // Browsers don't render floating point scroll
+ if (curr !== next) {
+ $(t.elem)[t.prop](next);
+ t._last = this.get(t);
}
}
};
View
4 jquery.scrollTo.min.js
@@ -2,6 +2,6 @@
* Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
* Licensed under MIT
* @author Ariel Flesler
- * @version 2.0.1
+ * @version 2.1.0
*/
-;(function(l){'use strict';l(['jquery'],function($){var k=$.scrollTo=function(a,b,c){return $(window).scrollTo(a,b,c)};k.defaults={axis:'xy',duration:0,limit:true};function isWin(a){return!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!==-1}$.fn.scrollTo=function(f,g,h){if(typeof g==='object'){h=g;g=0}if(typeof h==='function'){h={onAfter:h}}if(f==='max'){f=9e9}h=$.extend({},k.defaults,h);g=g||h.duration;var j=h.queue&&h.axis.length>1;if(j){g/=2}h.offset=both(h.offset);h.over=both(h.over);return this.each(function(){if(f===null)return;var d=isWin(this),elem=d?this.contentWindow||window:this,$elem=$(elem),targ=f,attr={},toff;switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=d?$(targ):$(targ,elem);if(!targ.length)return;case'object':if(targ.is||targ.style){toff=(targ=$(targ)).offset()}}var e=$.isFunction(h.offset)&&h.offset(elem,targ)||h.offset;$.each(h.axis.split(''),function(i,a){var b=a==='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,prev=$(elem)[key](),max=k.max(elem,a);if(toff){attr[key]=toff[pos]+(d?0:prev-$elem.offset()[pos]);if(h.margin){attr[key]-=parseInt(targ.css('margin'+b),10)||0;attr[key]-=parseInt(targ.css('border'+b+'Width'),10)||0}attr[key]+=e[pos]||0;if(h.over[pos]){attr[key]+=targ[a==='x'?'width':'height']()*h.over[pos]}}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)==='%'?parseFloat(c)/100*max:c}if(h.limit&&/^\d+$/.test(attr[key])){attr[key]=attr[key]<=0?0:Math.min(attr[key],max)}if(!i&&j){if(prev!==attr[key]){animate(h.onAfterFirst)}attr={}}});animate(h.onAfter);function animate(a){var b=$.extend({},h,{queue:true,duration:g,complete:a&&function(){a.call(elem,targ,h)}});$elem.animate(attr,b)}})};k.max=function(a,b){var c=b==='x'?'Width':'Height',scroll='scroll'+c;if(!isWin(a))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,doc=a.ownerDocument||a.document,html=doc.documentElement,body=doc.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}$.Tween.propHooks.scrollLeft=$.Tween.propHooks.scrollTop={get:function(t){return $(t.elem)[t.prop]()},set:function(t){var v=Math.round(t.now);if(this.get(t)!==v){$(t.elem)[t.prop](v)}}};return k})}(typeof define==='function'&&define.amd?define:function(a,b){'use strict';if(typeof module!=='undefined'&&module.exports){module.exports=b(require('jquery'))}else{b(jQuery)}}));
+;(function(l){'use strict';l(['jquery'],function($){var k=$.scrollTo=function(a,b,c){return $(window).scrollTo(a,b,c)};k.defaults={axis:'xy',duration:0,limit:true};function isWin(a){return!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!==-1}$.fn.scrollTo=function(f,g,h){if(typeof g==='object'){h=g;g=0}if(typeof h==='function'){h={onAfter:h}}if(f==='max'){f=9e9}h=$.extend({},k.defaults,h);g=g||h.duration;var j=h.queue&&h.axis.length>1;if(j){g/=2}h.offset=both(h.offset);h.over=both(h.over);return this.each(function(){if(f===null)return;var d=isWin(this),elem=d?this.contentWindow||window:this,$elem=$(elem),targ=f,attr={},toff;switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=d?$(targ):$(targ,elem);if(!targ.length)return;case'object':if(targ.is||targ.style){toff=(targ=$(targ)).offset()}}var e=$.isFunction(h.offset)&&h.offset(elem,targ)||h.offset;$.each(h.axis.split(''),function(i,a){var b=a==='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,prev=$elem[key](),max=k.max(elem,a);if(toff){attr[key]=toff[pos]+(d?0:prev-$elem.offset()[pos]);if(h.margin){attr[key]-=parseInt(targ.css('margin'+b),10)||0;attr[key]-=parseInt(targ.css('border'+b+'Width'),10)||0}attr[key]+=e[pos]||0;if(h.over[pos]){attr[key]+=targ[a==='x'?'width':'height']()*h.over[pos]}}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)==='%'?parseFloat(c)/100*max:c}if(h.limit&&/^\d+$/.test(attr[key])){attr[key]=attr[key]<=0?0:Math.min(attr[key],max)}if(!i&&h.axis.length>1){if(prev===attr[key]){attr={}}else if(j){animate(h.onAfterFirst);attr={}}}});animate(h.onAfter);function animate(a){var b=$.extend({},h,{queue:true,duration:g,complete:a&&function(){a.call(elem,targ,h)}});$elem.animate(attr,b)}})};k.max=function(a,b){var c=b==='x'?'Width':'Height',scroll='scroll'+c;if(!isWin(a))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,doc=a.ownerDocument||a.document,html=doc.documentElement,body=doc.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}$.Tween.propHooks.scrollLeft=$.Tween.propHooks.scrollTop={get:function(t){return $(t.elem)[t.prop]()},set:function(t){var a=this.get(t);if(t.options.interrupt&&t._last&&t._last!==a){return $(t.elem).stop()}var b=Math.round(t.now);if(a!==b){$(t.elem)[t.prop](b);t._last=this.get(t)}}};return k})}(typeof define==='function'&&define.amd?define:function(a,b){'use strict';if(typeof module!=='undefined'&&module.exports){module.exports=b(require('jquery'))}else{b(jQuery)}}));
View
9 package.json
@@ -1,15 +1,18 @@
{
"name": "jquery.scrollto",
- "version": "2.0.1",
+ "version": "2.1.0",
"description": "Easy element scrolling using jQuery.",
"main": "jquery.scrollTo.js",
"license": "MIT",
- "ignore": ["**/.*","demo","tests","changes.txt","composer.json","bower.json","scrollTo.jquery.json"],
+ "ignore": ["**/.*","demo","tests","CHANGELOG","README.md","composer.json","bower.json"],
"dependencies": { "jquery": ">=1.8" },
"homepage": "https://github.com/flesler/jquery.scrollTo/",
+ "docs": "https://github.com/flesler/jquery.scrollTo/",
+ "demo": "http://demos.flesler.com/jquery/scrollTo/",
"bugs": "https://github.com/flesler/jquery.scrollTo/issues",
+ "download": "https://github.com/flesler/jquery.scrollTo/releases",
"repository": "git://github.com/flesler/jquery.scrollTo",
- "keywords": ["browser","animated","animation","scrolling","scroll","links","anchors","jquery","jquery-plugin"],
+ "keywords": ["browser","animated","animation","scrolling","scroll","links","anchors","jquery","jquery-plugin", "ecosystem:jquery"],
"author": {
"name": "Ariel Flesler",
"web": "http://flesler.blogspot.com/"

0 comments on commit 0ecaf7c

Please sign in to comment.