| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|---|
| 2 | <html xmlns="http://www.w3.org/1999/xhtml">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|---|
| 5 | <title>jQuery.ScrollTo</title>
|
|---|
| 6 | <meta name="keywords" content="javascript, jquery, plugins, scroll, scrollTo, smooth, animation, to, effect, ariel, flesler, window, overflow, element, navigation, customizable" />
|
|---|
| 7 | <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." />
|
|---|
| 8 | <meta name="robots" content="index,follow" />
|
|---|
| 9 | <link type="text/css" rel="stylesheet" href="css/style.css" />
|
|---|
| 10 | <script type="text/javascript" src="jquery.js"></script>
|
|---|
| 11 | <script type="text/javascript" src="jquery.scrollTo.js"></script>
|
|---|
| 12 | <script type="text/javascript">
|
|---|
| 13 | jQuery(function( $ ){
|
|---|
| 14 | /**
|
|---|
| 15 | * Demo binding and preparation, no need to read this part
|
|---|
| 16 | */
|
|---|
| 17 | //borrowed from jQuery easing plugin
|
|---|
| 18 | //http://gsgd.co.uk/sandbox/jquery.easing.php
|
|---|
| 19 | $.easing.elasout = function(x, t, b, c, d) {
|
|---|
| 20 | var s=1.70158;var p=0;var a=c;
|
|---|
| 21 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
|---|
| 22 | if (a < Math.abs(c)) { a=c; var s=p/4; }
|
|---|
| 23 | else var s = p/(2*Math.PI) * Math.asin (c/a);
|
|---|
| 24 | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
|---|
| 25 | };
|
|---|
| 26 | $('a.back').click(function(){
|
|---|
| 27 | $(this).parents('div.pane').scrollTo( 0, 800, { queue:true } );
|
|---|
| 28 | $(this).parents('div.section').find('span.message').text( this.title );
|
|---|
| 29 | return false;
|
|---|
| 30 | });
|
|---|
| 31 | //just for the example, to stop the click on the links.
|
|---|
| 32 | $('ul.links').click(function(e){
|
|---|
| 33 | e.preventDefault();
|
|---|
| 34 | var link = e.target;
|
|---|
| 35 | link.blur();
|
|---|
| 36 | if( link.title )
|
|---|
| 37 | $(this).parent().find('span.message').text(link.title);
|
|---|
| 38 | });
|
|---|
| 39 |
|
|---|
| 40 | //by default, the scroll is only done vertically ('y'), change it to both.
|
|---|
| 41 | $.scrollTo.defaults.axis = 'xy';
|
|---|
| 42 | //this one is important, many browsers don't reset scroll on refreshes
|
|---|
| 43 | $('div.pane').scrollTo( 0 );//reset all scrollable panes to (0,0)
|
|---|
| 44 | $.scrollTo( 0 );//reset the screen to (0,0)
|
|---|
| 45 |
|
|---|
| 46 | //TOC, shows how to scroll the whole window
|
|---|
| 47 | $('#toc a').click(function(){//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
|
|---|
| 48 | $.scrollTo( this.hash, 1500, { easing:'elasout' });
|
|---|
| 49 | $(this.hash).find('span.message').text( this.title );
|
|---|
| 50 | return false;
|
|---|
| 51 | });
|
|---|
| 52 |
|
|---|
| 53 | //Target examples bindings
|
|---|
| 54 | var $paneTarget = $('#pane-target');
|
|---|
| 55 |
|
|---|
| 56 | $('#relative-selector').click(function(){
|
|---|
| 57 | $paneTarget.stop().scrollTo( 'li:eq(14)', 800 );
|
|---|
| 58 | });
|
|---|
| 59 | $('#jquery-object').click(function(){
|
|---|
| 60 | var $target = $paneTarget.find('li:eq(3)');
|
|---|
| 61 | $paneTarget.stop().scrollTo( $target , 800 );
|
|---|
| 62 | });
|
|---|
| 63 | $('#dom-element').click(function(){
|
|---|
| 64 | var target = $paneTarget.find('ul').get(0).childNodes[20];
|
|---|
| 65 | $paneTarget.stop().scrollTo( target, 800 );
|
|---|
| 66 | });
|
|---|
| 67 | $('#absolute-number').click(function(){
|
|---|
| 68 | $paneTarget.stop().scrollTo( 150, 800 );
|
|---|
| 69 | });
|
|---|
| 70 | $('#absolute-number-hash').click(function(){
|
|---|
| 71 | $paneTarget.stop().scrollTo( { top:800,left:700} , 800 );
|
|---|
| 72 | });
|
|---|
| 73 | $('#absolute-position').click(function(){
|
|---|
| 74 | $paneTarget.stop().scrollTo( '520px', 800 );
|
|---|
| 75 | });
|
|---|
| 76 | $('#absolute-position-hash').click(function(){
|
|---|
| 77 | $paneTarget.stop().scrollTo( {top:'110px',left:'290px'}, 800 );
|
|---|
| 78 | });
|
|---|
| 79 | $('#relative-position').click(function(){
|
|---|
| 80 | $paneTarget.stop().scrollTo( '+=100', 500 );
|
|---|
| 81 | });
|
|---|
| 82 | $('#relative-position-hash').click(function(){
|
|---|
| 83 | $paneTarget.stop().scrollTo( {top:'-=100px',left:'+=100'}, 500 );
|
|---|
| 84 | });
|
|---|
| 85 |
|
|---|
| 86 | //options examples bindings, they will all scroll to the same place, with different options
|
|---|
| 87 | function reset_o(){//before each animation, reset to (0,0), skip this.
|
|---|
| 88 | $paneOptions.stop().stop();
|
|---|
| 89 | $paneOptions[0].scrollLeft = $paneOptions[0].scrollTop = 0;
|
|---|
| 90 | };
|
|---|
| 91 | var $paneOptions = $('#pane-options');
|
|---|
| 92 |
|
|---|
| 93 | $('#options-no').click(function(){
|
|---|
| 94 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000 );
|
|---|
| 95 | });
|
|---|
| 96 | $('#options-axis').click(function(){//only scroll horizontally
|
|---|
| 97 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { axis:'x' } );
|
|---|
| 98 | });
|
|---|
| 99 | $('#options-duration').click(function(){//it's the same as specifying it in the 2nd argument
|
|---|
| 100 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', { duration: 3000 } );
|
|---|
| 101 | });
|
|---|
| 102 | $('#options-easing').click(function(){
|
|---|
| 103 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 2500, { easing:'elasout' } );
|
|---|
| 104 | });
|
|---|
| 105 | $('#options-margin').click(function(){//scroll to the "outer" position of the element
|
|---|
| 106 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { margin:true } );
|
|---|
| 107 | });
|
|---|
| 108 | $('#options-offset').click(function(){//same as { top:-50, left:-50 }
|
|---|
| 109 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { offset:-50 } );
|
|---|
| 110 | });
|
|---|
| 111 | $('#options-offset-hash').click(function(){
|
|---|
| 112 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { offset:{ top:-5,left:-30 } });
|
|---|
| 113 | });
|
|---|
| 114 | $('#options-over').click(function(){//same as { top:-50, left:-50 }
|
|---|
| 115 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { over:0.5 });
|
|---|
| 116 | });
|
|---|
| 117 | $('#options-over-hash').click(function(){
|
|---|
| 118 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { over:{ top:0.2, left:-0.5 } });
|
|---|
| 119 | });
|
|---|
| 120 | $('#options-queue').click(function(){//in this case, having 'axis' as 'xy' or 'yx' matters.
|
|---|
| 121 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 2000, { queue:true });
|
|---|
| 122 | });
|
|---|
| 123 | $('#options-onAfter').click(function(){
|
|---|
| 124 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 2000, {
|
|---|
| 125 | onAfter:function(){
|
|---|
| 126 | $('#options-message').text('Got there!');
|
|---|
| 127 | }
|
|---|
| 128 | });
|
|---|
| 129 | });
|
|---|
| 130 | $('#options-onAfterFirst').click(function(){//onAfterFirst exists only when queuing
|
|---|
| 131 | reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1600, {
|
|---|
| 132 | queue:true,
|
|---|
| 133 | onAfterFirst:function(){
|
|---|
| 134 | $('#options-message').text('Got there horizontally!');
|
|---|
| 135 | },
|
|---|
| 136 | onAfter:function(){
|
|---|
| 137 | $('#options-message').text('Got there vertically!');
|
|---|
| 138 | }
|
|---|
| 139 | });
|
|---|
| 140 | });
|
|---|
| 141 | });
|
|---|
| 142 | </script>
|
|---|
| 143 | </head>
|
|---|
| 144 | <body>
|
|---|
| 145 | <h1>jQuery.ScrollTo <strong>by Ariel Flesler</strong></h1>
|
|---|
| 146 |
|
|---|
| 147 | <div id="toc" class="part">
|
|---|
| 148 | <h3>Table of contents <strong>(try these)</strong></h3>
|
|---|
| 149 | <ul>
|
|---|
| 150 | <li><a title="$.scrollTo( '#target-examples', 800, {easing:'elasout'} );" href="#target-examples">Ways to specify the target</a></li>
|
|---|
| 151 | <li><a title="$.scrollTo( '#options-examples', 800, {easing:'elasout'} );" href="#options-examples">Options</a></li>
|
|---|
| 152 | </ul>
|
|---|
| 153 | </div>
|
|---|
| 154 |
|
|---|
| 155 | <div id="links" class="part">
|
|---|
| 156 | <h3>Links</h3>
|
|---|
| 157 | <ul>
|
|---|
| 158 | <li><a target="_blank" href="http://plugins.jquery.com/project/ScrollTo">Project Page</a></li>
|
|---|
| 159 | <li><a target="_blank" href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">Main blog article</a></li>
|
|---|
| 160 | <li><a target="_blank" href="http://flesler.blogspot.com/search/label/jQuery.ScrollTo">All articles</a></li>
|
|---|
| 161 | <li><a target="_blank" href="http://flesler.webs.com/jQuery.LocalScroll/">LocalScroll Demo</a></li>
|
|---|
| 162 | <li><a target="_blank" href="http://flesler.webs.com/jQuery.SerialScroll/">SerialScroll Demo</a></li>
|
|---|
| 163 | <li><a target="_blank" href="index.old.html">Old Demo</a></li>
|
|---|
| 164 | </ul>
|
|---|
| 165 | </div>
|
|---|
| 166 | <div id="target-examples" class="section part">
|
|---|
| 167 | <h3>Ways to specify the target <span id="target-message" class="message">Click an option, to see it in action</span></h3>
|
|---|
| 168 | <ul class="links">
|
|---|
| 169 | <li><a title="$(...).scrollTo( 'li:eq(14)', 800 );" id="relative-selector" href="#">Relative selector</a></li>
|
|---|
| 170 | <li><a title="$(...).scrollTo( $('div li:eq(14)'), 800 );" id="jquery-object" href="#">jQuery object</a></li>
|
|---|
| 171 | <li><a title="$(...).scrollTo( $('ul').get(2).childNodes[20], 800 );" id="dom-element" href="#">DOM Element</a></li>
|
|---|
| 172 | <li><a title="$(...).scrollTo( 150, 800 );" id="absolute-number" href="#">Absolute number</a></li>
|
|---|
| 173 | <li><a title="$(...).scrollTo( { top:800, left:700}, 800 );" id="absolute-number-hash" href="#">Absolute number(hash)</a></li>
|
|---|
| 174 | </ul>
|
|---|
| 175 | <ul class="links">
|
|---|
| 176 | <li><a title="$(...).scrollTo( '520px', 800 );" id="absolute-position" href="#">Absolute position</a></li>
|
|---|
| 177 | <li><a title="$(...).scrollTo( {top:'110px', left:'290px'}, 800 );" id="absolute-position-hash" href="#">Absolute position(hash)</a></li>
|
|---|
| 178 | <li><a title="$(...).scrollTo( '+=100px', 800 );" id="relative-position" href="#">Relative position</a></li>
|
|---|
| 179 | <li><a title="$(...).scrollTo( {top:'-=100px', left:'+=100'}, 800 );" id="relative-position-hash" href="#">Relative position(hash)</a></li>
|
|---|
| 180 | </ul>
|
|---|
| 181 | <div id="pane-target" class="pane">
|
|---|
| 182 | <ul class="elements" style="height:1011px; width:1820px;">
|
|---|
| 183 | <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>
|
|---|
| 184 | </ul>
|
|---|
| 185 | </div>
|
|---|
| 186 | </div>
|
|---|
| 187 | <div id="options-examples" class="section part">
|
|---|
| 188 | <h3>Options <span id="options-message" class="message">The examples shown here, are summarized for brevity, check the source for real code</span></h3>
|
|---|
| 189 | <ul class="links">
|
|---|
| 190 | <li><a title="$(...).scrollTo( 'li:eq(15)', 1000 );" id="options-no" href="#">no options</a></li>
|
|---|
| 191 | <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>
|
|---|
| 192 | <li><a title="$(...).scrollTo( 'li:eq(15)', {duration:3000} );//another way of calling the plugin" id="options-duration" href="#">duration</a></li>
|
|---|
| 193 | <li><a title="$(...).scrollTo( 'li:eq(15)', 2500, {easing:'elasout'} );//specify an easing equation" id="options-easing" href="#">easing</a></li>
|
|---|
| 194 | <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>
|
|---|
| 195 | <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {offset:-50} );//add or deduct from the final position" id="options-offset" href="#">offset</a></li>
|
|---|
| 196 | <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {offset: {top:-5, left:-30} });" id="options-offset-hash" href="#">offset(hash)</a></li>
|
|---|
| 197 | <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>
|
|---|
| 198 | <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {over:{top:0.2, left:-0.5} );" id="options-over-hash" href="#">over(hash)</a></li>
|
|---|
| 199 | <li><a title="$(...).scrollTo( 'li:eq(15)', 1600, {queue:true} );//scroll one axis, then the other" id="options-queue" href="#">queue</a></li>
|
|---|
| 200 | <li><a title="$(...).scrollTo( 'li:eq(15)', 1600, {onAfter:function(){ } } );//called after the scrolling ends" id="options-onAfter" href="#">onAfter</a></li>
|
|---|
| 201 | <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>
|
|---|
| 202 | </ul>
|
|---|
| 203 | <div id="pane-options" class="pane">
|
|---|
| 204 | <ul class="elements" style="height:1062px;width:1877px;">
|
|---|
| 205 | <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>
|
|---|
| 206 | </ul>
|
|---|
| 207 | </div>
|
|---|
| 208 | <p class="message">$.scrollTo.defaults.axis has been set to 'xy' for the demo, normally it's only 'y'. Note that 'xy' or 'yx' matters when queue is set to true.</p>
|
|---|
| 209 | <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>
|
|---|
| 210 | </div>
|
|---|
| 211 | </body>
|
|---|
| 212 | </html>
|
|---|
