Download raw (8.3 KB)
<!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. Lightweight, cross-browser and highly customizable animated scrolling with jQuery, made by Ariel Flesler." />
<meta name="robots" content="index,follow" />
<link type="text/css" rel="stylesheet" href="css/style.old.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( $ ){
//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;
};
$('button').click(function(){//this is not the cleanest way to do this, I'm just keeping it short.
var index = parseInt( $(this).prev('input').val() ) || 0;
var $c = $(this).parent().next();
$c.stop().scrollTo('li:eq('+index+')', {duration:2500, easing:'elasout',axis:$c.attr('id')});
});
$('#btn_screen').click(function(){
$.scrollTo( $('#txt_screen').val(), {duration:2500} );
});
$('div.container a').click(function(){
var $c = $(this).parents('.container');
$c.stop().scrollTo( 0, {duration:2000,axis:$c.attr('id'), queue:true} );
return false;
});
});
</script>
</head>
<body>
<h1>jQuery.ScrollTo <strong>by Ariel Flesler</strong></h1>
<div id="links" class="part" style="width:135px">
<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://flesler.webs.com/jQuery.LocalScroll/">LocalScroll Demo</a></li>
<li><a target="_blank" href="http://flesler.webs.com/jQuery.SerialScroll/">SerialScroll Demo</a></li>
<li><a target="_blank" href="./" rel="prev" rev="next">New Demo</a></li>
</ul>
</div>
<label for="txt_screen">Scroll the window to <input id="txt_screen" type="text" value=".pane:eq(1)" /><input id="btn_screen" type="button" value="Scroll" /></label><br /><br />
<label>Scroll to the #<input type="text" value="3" /> element inside this container<button>Scroll</button></label>
<div id="y" class="container">
<ul>
<li style="background-color:#9933CC;"><p>0</p><a href="#">back to top</a></li>
<li style="background-color:#FFCC99;"><p>1</p><a href="#">back to top</a></li>
<li style="background-color:#FF0000;"><p>2</p><a href="#">back to top</a></li>
<li style="background-color:#00FFCC;"><p>3</p><a href="#">back to top</a></li>
<li style="background-color:#663366;"><p>4</p><a href="#">back to top</a></li>
<li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to top</a></li>
<li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to top</a></li>
<li style="background-color:#00FF00;"><p>7</p><a href="#">back to top</a></li>
</ul>
</div>
<label>Scroll to the #<input type="text" value="3" /> element inside this container<button>Scroll</button></label>
<div id="x" class="container">
<ul style="width:4820px;">
<li style="background-color:#9933CC;"><p>0</p><a href="#">back to start</a></li>
<li style="background-color:#FFCC99;"><p>1</p><a href="#">back to start</a></li>
<li style="background-color:#FF0000;"><p>2</p><a href="#">back to start</a></li>
<li style="background-color:#00FFCC;"><p>3</p><a href="#">back to start</a></li>
<li style="background-color:#663366;"><p>4</p><a href="#">back to start</a></li>
<li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to start</a></li>
<li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to start</a></li>
<li style="background-color:#00FF00;"><p>7</p><a href="#">back to start</a></li>
<li style="background-color:#9933CC;"><p>8</p><a href="#">back to start</a></li>
<li style="background-color:#FFCC99;"><p>9</p><a href="#">back to start</a></li>
<li style="background-color:#FF0000;"><p>10</p><a href="#">back to start</a></li>
<li style="background-color:#00FFCC;"><p>11</p><a href="#">back to start</a></li>
<li style="background-color:#663366;"><p>12</p><a href="#">back to start</a></li>
<li style="background-color:#CCCCFF;"><p>13</p><a href="#">back to start</a></li>
<li style="background-color:#FFFFCC;"><p>14</p><a href="#">back to start</a></li>
<li style="background-color:#00FF00;"><p>15</p><a href="#">back to start</a></li>
</ul>
</div>
<label>Scroll to the #<input type="text" value="16" /> element inside this container<button>Scroll</button></label>
<div id="xy" class="container">
<ul style="width:1500px;">
<li style="background-color:#9933CC;"><p>0</p><a href="#">back to start</a></li>
<li style="background-color:#FFCC99;"><p>1</p><a href="#">back to start</a></li>
<li style="background-color:#FF0000;"><p>2</p><a href="#">back to start</a></li>
<li style="background-color:#00FFCC;"><p>3</p><a href="#">back to start</a></li>
<li style="background-color:#663366;"><p>4</p><a href="#">back to start</a></li>
<li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to start</a></li>
<li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to start</a></li>
<li style="background-color:#00FF00;"><p>7</p><a href="#">back to start</a></li>
<li style="background-color:#9933CC;"><p>8</p><a href="#">back to start</a></li>
<li style="background-color:#FFCC99;"><p>9</p><a href="#">back to start</a></li>
<li style="background-color:#FF0000;"><p>10</p><a href="#">back to start</a></li>
<li style="background-color:#00FFCC;"><p>11</p><a href="#">back to start</a></li>
<li style="background-color:#663366;"><p>12</p><a href="#">back to start</a></li>
<li style="background-color:#CCCCFF;"><p>13</p><a href="#">back to start</a></li>
<li style="background-color:#FFFFCC;"><p>14</p><a href="#">back to start</a></li>
<li style="background-color:#00FF00;"><p>15</p><a href="#">back to start</a></li>
<li style="background-color:#9933CC;"><p>16</p><a href="#">back to start</a></li>
<li style="background-color:#FFCC99;"><p>17</p><a href="#">back to start</a></li>
<li style="background-color:#FF0000;"><p>18</p><a href="#">back to start</a></li>
<li style="background-color:#00FFCC;"><p>19</p><a href="#">back to start</a></li>
<li style="background-color:#663366;"><p>20</p><a href="#">back to start</a></li>
<li style="background-color:#CCCCFF;"><p>21</p><a href="#">back to start</a></li>
<li style="background-color:#FFFFCC;"><p>22</p><a href="#">back to start</a></li>
<li style="background-color:#00FF00;"><p>23</p><a href="#">back to start</a></li>
<li style="background-color:#9933CC;"><p>24</p><a href="#">back to start</a></li>
<li style="background-color:#FFCC99;"><p>25</p><a href="#">back to start</a></li>
<li style="background-color:#FF0000;"><p>26</p><a href="#">back to start</a></li>
<li style="background-color:#00FFCC;"><p>27</p><a href="#">back to start</a></li>
<li style="background-color:#663366;"><p>28</p><a href="#">back to start</a></li>
<li style="background-color:#CCCCFF;"><p>29</p><a href="#">back to start</a></li>
</ul>
</div>
<div class="pane" style="background-color:#000000;margin-top:40px;"></div>
<div class="pane" style="background-color:#333333;"></div>
<div class="pane" style="background-color:#666666;"></div>
<div class="pane" style="background-color:#999999;"></div>
<div class="pane" style="background-color:#CCCCCC;"></div>
</body>
</html>