Created
March 10, 2014 13:27
-
-
Save griffiths/9464895 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | |
| <title>jQuery.ScrollTo</title> | |
| <meta name="keywords" content="javascript, jquery, plugins, scroll, scrollTo, smooth, animation, to, effect, ariel, flesler, window, overflow, element, navigation, customizable" /> | |
| <meta name="description" content="Demo of jQuery.ScrollTo. A very light and highly customizable jQuery plugin, to scroll overflowed elements or the window itself, made by Ariel Flesler." /> | |
| <meta name="robots" content="index,follow" /> | |
| <link type="text/css" rel="stylesheet" href="css/style.css" /> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> | |
| <script type="text/javascript" src="../jquery.scrollTo.js"></script> | |
| <script type="text/javascript"> | |
| jQuery(function( $ ){ | |
| /** | |
| * Demo binding and preparation, no need to read this part | |
| */ | |
| //borrowed from jQuery easing plugin | |
| //http://gsgd.co.uk/sandbox/jquery.easing.php | |
| $.easing.elasout = function(x, t, b, c, d) { | |
| var s=1.70158;var p=0;var a=c; | |
| if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | |
| if (a < Math.abs(c)) { a=c; var s=p/4; } | |
| else var s = p/(2*Math.PI) * Math.asin (c/a); | |
| return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; | |
| }; | |
| $('a.back').click(function(){ | |
| $(this).parents('div.pane').scrollTo( 0, 800, { queue:true } ); | |
| $(this).parents('div.section').find('span.message').text( this.title ); | |
| return false; | |
| }); | |
| //just for the example, to stop the click on the links. | |
| $('ul.links').click(function(e){ | |
| e.preventDefault(); | |
| var link = e.target; | |
| link.blur(); | |
| if( link.title ) | |
| $(this).parent().find('span.message').text(link.title); | |
| }); | |
| // This one is important, many browsers don't reset scroll on refreshes | |
| // Reset all scrollable panes to (0,0) | |
| $('div.pane').scrollTo( 0 ); | |
| // Reset the screen to (0,0) | |
| $.scrollTo( 0 ); | |
| // TOC, shows how to scroll the whole window | |
| $('#toc a').click(function(){//$.scrollTo works EXACTLY the same way, but scrolls the whole screen | |
| $.scrollTo( this.hash, 1500, { easing:'elasout' }); | |
| $(this.hash).find('span.message').text( this.title ); | |
| return false; | |
| }); | |
| // Target examples bindings | |
| var $paneTarget = $('#pane-target'); | |
| $('#relative-selector').click(function(){ | |
| $paneTarget.stop().scrollTo( 'li:eq(14)', 800 ); | |
| }); | |
| $('#jquery-object').click(function(){ | |
| var $target = $paneTarget.find('li:eq(14)'); | |
| $paneTarget.stop().scrollTo( $target , 800 ); | |
| }); | |
| $('#dom-element').click(function(){ | |
| var target = $paneTarget.find('ul').get(0).childNodes[20]; | |
| $paneTarget.stop().scrollTo( target, 800 ); | |
| }); | |
| $('#absolute-number').click(function(){ | |
| $paneTarget.stop().scrollTo( 150, 800 ); | |
| }); | |
| $('#absolute-number-hash').click(function(){ | |
| $paneTarget.stop().scrollTo( { top:800,left:700} , 800 ); | |
| }); | |
| $('#absolute-position').click(function(){ | |
| $paneTarget.stop().scrollTo( '520px', 800 ); | |
| }); | |
| $('#absolute-position-hash').click(function(){ | |
| $paneTarget.stop().scrollTo( {top:'110px',left:'290px'}, 800 ); | |
| }); | |
| $('#relative-position').click(function(){ | |
| $paneTarget.stop().scrollTo( '+=100', 500 ); | |
| }); | |
| $('#relative-position-hash').click(function(){ | |
| $paneTarget.stop().scrollTo( {top:'-=100px',left:'+=100'}, 500 ); | |
| }); | |
| $('#percentage-position').click(function(){ | |
| $paneTarget.stop().scrollTo( '50%', 800 ); | |
| }); | |
| // Options examples bindings, they will all scroll to the same place, with different options | |
| function reset_o(){//before each animation, reset to (0,0), skip this. | |
| $paneOptions.stop().stop(); | |
| $paneOptions[0].scrollLeft = $paneOptions[0].scrollTop = 0; | |
| }; | |
| var $paneOptions = $('#pane-options'); | |
| $('#options-no').click(function(){ | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000 ); | |
| }); | |
| $('#options-axis').click(function(){// only scroll horizontally | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { axis:'x' } ); | |
| }); | |
| $('#options-duration').click(function(){// it's the same as specifying it in the 2nd argument | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', { duration: 3000 } ); | |
| }); | |
| $('#options-easing').click(function(){ | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 2500, { easing:'elasout' } ); | |
| }); | |
| $('#options-margin').click(function(){//scroll to the "outer" position of the element | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { margin:true } ); | |
| }); | |
| $('#options-offset').click(function(){//same as { top:-50, left:-50 } | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { offset:-50 } ); | |
| }); | |
| $('#options-offset-hash').click(function(){ | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { offset:{ top:-5,left:-30 } }); | |
| }); | |
| $('#options-offset-function').click(function(){ | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, {offset: function() { return {top:-30, left:-5}; }}); | |
| }); | |
| $('#options-over').click(function(){//same as { top:-50, left:-50 } | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { over:0.5 }); | |
| }); | |
| $('#options-over-hash').click(function(){ | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { over:{ top:0.2, left:-0.5 } }); | |
| }); | |
| $('#options-queue').click(function(){//in this case, having 'axis' as 'xy' or 'yx' matters. | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 2000, { queue:true }); | |
| }); | |
| $('#options-onAfter').click(function(){ | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 2000, { | |
| onAfter:function(){ | |
| $('#options-message').text('Got there!'); | |
| } | |
| }); | |
| }); | |
| $('#options-onAfterFirst').click(function(){//onAfterFirst exists only when queuing | |
| reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1600, { | |
| queue:true, | |
| onAfterFirst:function(){ | |
| $('#options-message').text('Got there horizontally!'); | |
| }, | |
| onAfter:function(){ | |
| $('#options-message').text('Got there vertically!'); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>jQuery.ScrollTo <strong>by Ariel Flesler</strong></h1> | |
| <div id="toc" class="part"> | |
| <h3>Table of contents <strong>(try these)</strong></h3> | |
| <ul> | |
| <li><a title="$.scrollTo( '#target-examples', 800, {easing:'elasout'} );" href="#target-examples">Ways to specify the target</a></li> | |
| <li><a title="$.scrollTo( '#options-examples', 800, {easing:'elasout'} );" href="#options-examples">Options</a></li> | |
| </ul> | |
| </div> | |
| <div id="links" class="part"> | |
| <h3>Links</h3> | |
| <ul> | |
| <li><a target="_blank" href="http://plugins.jquery.com/project/ScrollTo">Project Page</a></li> | |
| <li><a target="_blank" href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">Main blog article</a></li> | |
| <li><a target="_blank" href="http://flesler.blogspot.com/search/label/jQuery.ScrollTo">All articles</a></li> | |
| <li><a target="_blank" href="http://demos.flesler.com/jquery/localScroll/">LocalScroll Demo</a></li> | |
| <li><a target="_blank" href="http://demos.flesler.com/jquery/serialScroll/">SerialScroll Demo</a></li> | |
| <li><a target="_blank" href="index.old.html">Old Demo</a></li> | |
| </ul> | |
| </div> | |
| <div id="target-examples" class="section part"> | |
| <h3>Ways to specify the target <span id="target-message" class="message">Click an option, to see it in action</span></h3> | |
| <ul class="links"> | |
| <li><a title="$(...).scrollTo( 'li:eq(14)', 800 );" id="relative-selector" href="#">Relative selector</a></li> | |
| <li><a title="$(...).scrollTo( $('div li:eq(14)'), 800 );" id="jquery-object" href="#">jQuery object</a></li> | |
| <li><a title="$(...).scrollTo( $('ul').get(2).childNodes[20], 800 );" id="dom-element" href="#">DOM Element</a></li> | |
| <li><a title="$(...).scrollTo( 150, 800 );" id="absolute-number" href="#">Absolute number</a></li> | |
| <li><a title="$(...).scrollTo( { top:800, left:700}, 800 );" id="absolute-number-hash" href="#">Absolute number(hash)</a></li> | |
| </ul> | |
| <ul class="links"> | |
| <li><a title="$(...).scrollTo( '520px', 800 );" id="absolute-position" href="#">Absolute position</a></li> | |
| <li><a title="$(...).scrollTo( {top:'110px', left:'290px'}, 800 );" id="absolute-position-hash" href="#">Absolute position(hash)</a></li> | |
| <li><a title="$(...).scrollTo( '+=100px', 800 );" id="relative-position" href="#">Relative position</a></li> | |
| <li><a title="$(...).scrollTo( {top:'-=100px', left:'+=100'}, 800 );" id="relative-position-hash" href="#">Relative position(hash)</a></li> | |
| <li><a title="$(...).scrollTo( '50%', 800 );" id="percentage-position" href="#">Percentage</a></li> | |
| </ul> | |
| <div id="pane-target" class="pane"> | |
| <ul class="elements" style="height:1011px; width:1820px;"> | |
| <li><p>0</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>1</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>2</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>3</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>4</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>5</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>6</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>7</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>8</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>9</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>10</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>11</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>12</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>13</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>14</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>15</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>16</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>17</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>18</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>19</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>20</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>21</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>22</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>23</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>24</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>25</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>26</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>27</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>28</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>29</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div id="options-examples" class="section part"> | |
| <h3>Options <span id="options-message" class="message">The examples shown here, are summarized for brevity, check the source for real code</span></h3> | |
| <ul class="links"> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', 1000 );" id="options-no" href="#">no options</a></li> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {axis:'x'} );//only scroll on this axis (can be x, y, xy or yx)" id="options-axis" href="#">axis</a></li> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', {duration:3000} );//another way of calling the plugin" id="options-duration" href="#">duration</a></li> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', 2500, {easing:'elasout'} );//specify an easing equation" id="options-easing" href="#">easing</a></li> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {margin:true} );//deduct the margin and border from the final position" id="options-margin" href="#">margin</a></li> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {offset:-50} );//add or deduct from the final position" id="options-offset" href="#">offset</a></li> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {offset: {top:-5, left:-30} });" id="options-offset-hash" href="#">offset(hash)</a></li> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {offset: function() { return {top:-30, left:-5}; }});" id="options-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="options-over" href="#">over</a></li> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {over:{top:0.2, left:-0.5} );" id="options-over-hash" href="#">over(hash)</a></li> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', 1600, {queue:true} );//scroll one axis, then the other" id="options-queue" href="#">queue</a></li> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', 1600, {onAfter:function(){ } } );//called after the scrolling ends" id="options-onAfter" href="#">onAfter</a></li> | |
| <li><a title="$(...).scrollTo( 'li:eq(15)', 1600, {queue:true, onAfterFirst:function(){ } } );//called after the first axis scrolled" id="options-onAfterFirst" href="#">onAfterFirst</a></li> | |
| </ul> | |
| <div id="pane-options" class="pane"> | |
| <ul class="elements" style="height:1062px;width:1877px;"> | |
| <li><p>0</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>1</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>2</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>3</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>4</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>5</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>6</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>7</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>8</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>9</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>10</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>11</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>12</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>13</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>14</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>15</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>16</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>17</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>18</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>19</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>20</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>21</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>22</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>23</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>24</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>25</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>26</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>27</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>28</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li><p>29</p><a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li> | |
| </ul> | |
| </div> | |
| <p class="message">Note that when 'queue' is true, choosing 'axis' as 'xy' or 'yx' matters</p> | |
| <p class="message">Don't use a hash for the target to scroll only one axis, use the option 'axis' instead. The hash is used to scroll both axes with different positions.</p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment