Старт

This commit is contained in:
2023-11-07 19:51:49 +06:00
commit 86542a157f
5002 changed files with 199551 additions and 0 deletions

View File

@ -0,0 +1,16 @@
lib-cov
*.seed
*.log
*.csv
*.dat
*.out
*.pid
*.gz
pids
logs
results
node_modules
npm-debug.log
.DS_Store

View File

@ -0,0 +1,41 @@
{
"requireCurlyBraces": [
"do","else","for","switch", "try","catch","while"
],
"requireSpaceBeforeKeywords": [
"else", "catch"
],
"requireSpaceAfterKeywords": [
"do", "for", "if", "else", "switch", "case", "try",
"catch", "void", "while", "with", "return", "typeof"
],
"requireSpaceBeforeBlockStatements": true,
"requireParenthesesAroundIIFE": true,
"requireSpacesInFunctionExpression": {"beforeOpeningCurlyBrace": true},
"disallowSpacesInFunctionExpression": {"beforeOpeningRoundBrace": true},
"disallowSpacesInCallExpression": true,
"requireBlocksOnNewline": 1,
"disallowPaddingNewlinesInBlocks": true,
"disallowEmptyBlocks": true,
"disallowQuotedKeysInObjects": "allButReserved",
"disallowSpaceAfterObjectKeys": true,
"requireCommaBeforeLineBreak": true,
"requireOperatorBeforeLineBreak": true,
"disallowSpaceAfterPrefixUnaryOperators": true,
"disallowSpaceBeforePostfixUnaryOperators": true,
"disallowKeywords": [ "with" ],
"disallowMultipleLineBreaks": true,
"disallowMixedSpacesAndTabs": "smart",
"disallowOperatorBeforeLineBreak": ["."],
"disallowTrailingWhitespace": true,
"disallowTrailingComma": true,
"disallowKeywordsOnNewLine": ["else"],
"requireCapitalizedConstructors": true,
"requireDotNotation": true,
"disallowYodaConditions": true,
"disallowNewlineBeforeBlockStatements": true,
"validateLineBreaks": "LF",
"validateQuoteMarks": { "mark": "'", "escape": true },
"validateIndentation": "\t",
"validateParameterSeparator": ", "
}

View File

@ -0,0 +1,24 @@
{
"shadow": "inner",
"camelcase": true,
"eqeqeq": true,
"eqnull": true,
"freeze": true,
"funcscope": true,
"newcap": true,
"noarg": true,
"noempty": true,
"nonbsp": true,
"unused": true,
"undef": true,
"scripturl": true,
"strict": true,
"quotmark": "single",
"globals": {"define": true},
"browser": true,
"node": true,
"jquery": true,
"esversion": 10
}

View File

@ -0,0 +1,178 @@
2.1.1
[Fix]
- Slight change so define function is not minified (#91)
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
2.0.0
[Feature]
- All settings are passed to jQuery.animate() meaning it now supports even more settings
[Enhancement]
- $(window)._scrollable() is no longer needed, the element is always the window
- Delegating to jQuery the get/set of element/window scroll positions.
[Compat]
- Dropped support for $.scrollTo.window() and $(window)._scrollable()
[Fix]
- Now works consistenly on Chrome 40
- Now works correctly on Windows Phone
- Now works correctly on Android Browsers
- Now works correctly on iOS Browsers
1.4.14
[Misc]
- Internal both() function will handle nulls correctly
1.4.13
[Misc]
- Support for CommonJS / NPM added by durango
1.4.12
[Fix]
- Fixed selector matching body fails on window scrolling
1.4.11
[Misc]
- Reverted changes from 1.4.10
1.4.10
[Enhancement]
- Giving the plugin an AMD module id so it can be required (f.e by localScroll)
1.4.9
[Enhancement]
- "offset" setting can now be a function as well (#60)
1.4.8
[Enhancement]
- Added support for AMD
1.4.7
[Misc]
- Changed spacing
- Changed licensing to MIT
- Repo is compliant with official jquery plugins repository
1.4.6
[Fix]
- Fixed first argument of onAfter and onAfterFirst was original target and should be "parsed" target
1.4.5
[Fix]
- Fixed passing a negative scroll value crashes
1.4.4
[Change]
- Re-released as 1.4.4 to avoid issues with bower
1.4.3.1
[Fix]
- Fixed $.scrollTo(0) broken on 1.4.3
1.4.3
[Enhancement]
- Limit calculations can be disabled by setting the option 'limit' to false.
- Null target or unmatching selector don't break and fail silently
[Misc]
- Removed support for the deprecated setting 'speed'
[Fix]
- Removed $.browser.webkit so the plugin works with jQuery +1.8
1.4.2
[Feature]
- The plugin support percentages as target ('50%' or {top:'50%', left:'45%'})
- Exposed the max() calculation as $.scrollTo.max
[Enhancement]
- Renamed $.fn.scrollable to $.fn._scrollable to avoid conflicts with other plugins
[Fix]
- Fixing max calculations for regular DOM elements
1.4.1
[Feature]
- The target can be 'max' to scroll to the end while keeping it elegant.
[Enhancement]
- Default duration is 0 for jquery +1.3. Means sync animation
- The plugin works on all major browsers, on compat & quirks modes, including iframes.
- In addition to window/document, if html or body are received, the plugin will choose the right one.
[Fix]
- The plugin accepts floating numbers, Thanks Ramin
- Using jQuery.nodeName where neccessary so that this works on xml+xhtml
- The max() internal function wasn't completely accurrate, now it is 98% (except for IE on quirks mode and it's not too noticeable).
1.4
[Fix]
- Fixed the problem when scrolling the window to absolute positioned elements on Safari.
- Fixed the problem on Opera 9.5 when scrolling the window. That it always scrolls to 0.
[Feature]
- Added the settings object as 2nd argument to the onAfter callback.
- The 3rd argument of scrollTo can be just a function and it's used as the onAfter.
- Added full support for iframes (even max scroll calculation).
- Instead of $.scrollTo, $(window).scrollTo() and $(document).scrollTo() can be used.
- Added $().scrollable() that returns the real element to scroll, f.e: $(window).scrollable() == [body|html], works for iframes.
[Enhancement]
- Cleaned the code a bit, specially the comments
1.3.3
[Change]
- Changed the licensing from GPL to GPL+MIT.
1.3.2
[Enhancement]
- Small improvements to make the code shorter.
[Change]
- Removed the last argument received by onAfter as it was the same as the 'this' but jqueryfied.
1.3.1
[Feature]
- Exposed $.scrollTo.window() to get the element that needs to be animated, to scroll the window.
- Added option 'over'.
[Enhancement]
- Made the code as short as possible.
[Change]
- Changed the arguments received by onAfter
1.3
[Enhancement]
- Added semicolon to the start, for safe file concatenation
- Added a limit check, values below 0 or over the maximum are fixed.
- Now it should work faster, only one of html or body go through all the processing, instead of both for all browsers.
[Fix]
- Fixed the behavior for Opera, which seemed to react to both changes on <html> and <body>.
- The border is also reduced, when 'margin' is set to true.
[Change]
- The option speed has been renamed to duration.
[Feature]
- The duration can be specified with a number as 2nd argument, and the rest of the settings as the third ( like $().animate )
- Remade the demo
1.2.4
[Enhancement]
- The target can be in the form of { top:x, left:y } allowing different position for each axis.
[Feature]
- The option 'offset' has been added, to scroll behind or past the target. Can be a number(both axes) or { top:x, left:y }.
1.2.3
[Feature]
- Exposed the defaults.
[Enhancement]
- Made the callback functions receive more parameters.
1.2.2
[Fix]
- Fixed a bug, I didn't have to add the scrolled amount if it was body or html.
1.2
[Change]
- The option 'onafter' is now called 'onAfter'.
[Feature]
- Two axes can be scrolled together, this is set with the option 'axis'.
- In case 2 axes are chosen, the scrolling can be queued: one scrolls, and then the other.
- There's an intermediary event, 'onAfterFirst' called in case the axes are queued, after the first ends.
- If the option 'margin' is set to true, the plugin will take in account, the margin of the target(no use if target is a value).

View File

@ -0,0 +1,22 @@
(The MIT License)
Copyright (c) 2007-2015 Ariel Flesler <aflesler@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,151 @@
# jQuery.scrollTo
Lightweight, cross-browser and highly customizable animated scrolling with jQuery
[![GitHub version](https://badge.fury.io/gh/flesler%2Fjquery.scrollTo.svg)](http://badge.fury.io/gh/flesler%2Fjquery.scrollTo)
[![libscore](http://img.shields.io/badge/libscore-31656-brightgreen.svg?style=flat-square)](http://libscore.com/#jQuery.fn.scrollTo)
## Installation
The plugin requires jQuery 1.8 or higher.
Via [bower](https://github.com/flesler/jquery.scrollTo/blob/master/bower.json):
```bash
bower install jquery.scrollTo
```
Via [npm](https://www.npmjs.com/package/jquery.scrollto):
```bash
npm install jquery.scrollto
```
Via [packagist](https://packagist.org/packages/flesler/jquery.scrollTo):
```php
php composer.phar require --prefer-dist flesler/jquery.scrollto "*"
```
### Using a public CDN
CDN provided by [jsdelivr](http://www.jsdelivr.com/#!jquery.scrollto)
```html
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script>
```
CDN provided by [cdnjs](https://cdnjs.com/libraries/jquery-scrollTo)
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>
```
### Downloading Manually
If you want the latest stable version, get the latest release from the [releases page](https://github.com/flesler/jquery.scrollTo/releases).
## 2.0
Version 2.0 has been recently released. It is mostly backwards compatible, if you have any issue first check [this link](https://github.com/flesler/jquery.scrollTo/wiki/Migrating-to-2.0).
If your problem is not solved then go ahead and [report the issue](https://github.com/flesler/jquery.scrollTo/issues/new).
## Usage
jQuery.scrollTo's signature is designed to resemble [$().animate()](http://api.jquery.com/animate/).
```js
$(element).scrollTo(target[,duration][,settings]);
```
### _element_
This must be a scrollable element, to scroll the whole window use `$(window)`.
### _target_
This defines the position to where `element` must be scrolled. The plugin supports all these formats:
* A number with a fixed position: `250`
* A string with a fixed position with px: `"250px"`
* A string with a percentage (of container's size): `"50%"`
* A string with a relative step: `"+=50px"`
* An object with `left` and `top` containining any of the aforementioned: `{left:250, top:"50px"}`
* The string `"max"` to scroll to the end.
* A string selector that will be relative to the element to scroll: `".section:eq(2)"`
* A DOM element, probably a child of the element to scroll: `document.getElementById("top")`
* A jQuery object with a DOM element: `$("#top")`
### _settings_
The `duration` parameter is a shortcut to the setting with the same name.
These are the supported settings:
* __axis__: The axes to animate: `xy` (default), `x`, `y`, `yx`
* __interrupt__: If `true` will cancel the animation if the user scrolls. Default is `false`
* __limit__: If `true` the plugin will not scroll beyond the container's size. Default is `true`
* __margin__: If `true`, subtracts the margin and border of the `target` element. Default is `false`
* __offset__: Added to the final position, can be a number or an object with `left` and `top`
* __over__: Adds a % of the `target` dimensions: `{left:0.5, top:0.5}`
* __queue__: If `true` will scroll one `axis` and then the other. Default is `false`
* __onAfter(target, settings)__: A callback triggered when the animation ends (jQuery's `complete()`)
* __onAfterFirst(target, settings)__: A callback triggered after the first axis scrolls when queueing
You can add any setting supported by [$().animate()](http://api.jquery.com/animate/#animate-properties-options) as well:
* __duration__: Duration of the animation, default is `0` which makes it instantaneous
* __easing__: Name of an easing equation, you must register the easing function: `swing`
* __fail()__: A callback triggered when the animation is stopped (f.e via `interrupt`)
* __step()__: A callback triggered for every animated property on every frame
* __progress()__: A callback triggered on every frame
* And more, check jQuery's [documentation](http://api.jquery.com/animate/#animate-properties-options)
### window shorthand
You can use `$.scrollTo(...)` as a shorthand for `$(window).scrollTo(...)`.
### Changing the default settings
As with most plugins, the default settings are exposed so they can be changed.
```js
$.extend($.scrollTo.defaults, {
axis: 'y',
duration: 800
});
```
### Stopping the animation
jQuery.scrollTo ends up creating ordinary animations which can be stopped by calling [$().stop()](http://api.jquery.com/stop/) or [$().finish()](http://api.jquery.com/finish/) on the same element you called `$().scrollTo()`, including the `window`.
Remember you can pass a `fail()` callback to be called when the animation is stopped.
## Demo
Check the [demo](http://demos.flesler.com/jquery/scrollTo/) to see every option in action.
## Complementary plugins
There are two plugins, also created by me that depend on jQuery.scrollTo and aim to simplify certain use cases.
### [jQuery.localScroll](https://github.com/flesler/jquery.localScroll)
This plugin makes it very easy to implement anchor navigation.
If you don't want to include another plugin, you can try using something like [this minimalistic gist](https://gist.github.com/flesler/3f3e1166690108abf747).
### [jQuery.serialScroll](https://github.com/flesler/jquery.serialScroll)
This plugin simplifies the creation of scrolling slideshows.
## License
(The MIT License)
Copyright (c) 2007-2015 Ariel Flesler <aflesler@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,28 @@
{
"name": "jquery.scrollTo",
"description": "Lightweight, cross-browser and highly customizable animated scrolling with jQuery",
"homepage": "https://github.com/flesler/jquery.scrollTo",
"main": [
"./jquery.scrollTo.js"
],
"ignore": [
"**/.*",
"demo",
"tests",
"CHANGELOG",
"README.md",
"composer.json",
"package.json"
],
"dependencies": {
"jquery": ">=1.8"
},
"keywords": [
"browser", "animated", "animation", "jquery",
"scrolling", "scroll", "links", "anchors"
],
"author": {
"name": "Ariel Flesler",
"web": "http://flesler.blogspot.com/"
}
}

View File

@ -0,0 +1,32 @@
{
"name": "flesler/jquery.scrollto",
"description": "Lightweight, cross-browser and highly customizable animated scrolling with jQuery",
"keywords": [
"browser", "animated", "animation", "jquery",
"scrolling", "scroll", "links", "anchors"
],
"homepage": "https://github.com/flesler/jquery.scrollTo",
"support": {
"issues": "https://github.com/flesler/jquery.scrollTo/issues",
"source": "https://github.com/flesler/jquery.scrollTo"
},
"authors": [
{
"name": "Ariel Flesler",
"web": "http://flesler.blogspot.com/"
}
],
"require": {
"components/jquery": ">=1.8"
},
"extra": {
"component": {
"scripts": [
"jquery.scrollTo.js"
],
"files": [
"jquery.scrollTo.min.js"
]
}
}
}

View File

@ -0,0 +1,150 @@
body{
padding:5px;
height:1600px;
font-family: Verdana, sans-serif;
background-color: #DDD;
}
ul,li,h1,h2,h3,h4,p{
list-style:none;
padding:0;
margin:0;
}
.part{
border:1px solid black;
background-color:white;
}
.part h3,
.part h4,
.part h4 a {
color:#933;
}
#toc{
display:block;
padding:10px;
position:relative;
margin:15px 0;
float:left;
width:305px;
}
#toc h3{
padding-bottom:10px;
}
#toc h3 strong{
font-size:13px;
color:black;
}
#links{
border:1px solid black;
width:210px;
padding:10px;
float:right;
margin-top:-30px;
}
#links h3{
color:#933;
}
#links ul{
padding: 8px 0 3px 20px;
}
#links li{
list-style-type:circle;
}
#links a{
color:#69C;
}
#toc li, #links li{
list-style-type:circle;
padding-left:5px;
margin-left:15px;
}
#toc a{
color:#69C;
}
.section{
border:1px black solid;
width:950px;
padding:10px;
margin: 5px 0;
position:relative;
clear:both;
}
.section h3{
margin-bottom:10px;
margin-left: 8px;
}
.section h4{
margin:10px 0 10px 8px;
}
.section li{
float:left;
}
.pane{
overflow:auto;
clear:left;
margin: 10px 0 0 10px;
position:relative;
width:826px;
height:322px;
}
ul.elements{
background-color:#5B739C;
}
ul.elements li{
width:200px;
height:100px;
font-weight:bolder;
border:1px black solid;
text-align:center;
padding:50px;
position:relative;
background-color:#DDD;
}
ul.elements li a{
bottom:20px;
color:#933;
font-size:12px;
left:125px;
position:absolute;
}
ul.elements li p{
color:#666;
}
#pane-settings ul.elements li{
margin:5px;
}
#pane-settings{
margin-bottom:10px;
}
ul.links{
height:20px;
overflow:hidden;
padding-left: 5px;
}
ul.links a{
color:#69C;
margin:0 0 0 5px;
}
.clear{
clear:left;
}
h3 span{
position:absolute;
}
.message{
background:#EEE;
border:1px solid #999;
color:#333;
font-size:12px;
font-weight:normal;
padding:1px;
margin-top:2px;
}
h1{
color:#5B739C;
}
h1 strong{
font-size:13px;
color:#777;
}

View File

@ -0,0 +1,69 @@
body{
background-color: #DDD;
}
.container li,div.pane{
height:200px;
font-weight:bolder;
position:relative;
}
ul{
list-style:none;
padding:0;
margin:0;
}
.container a{
color:black;
position:absolute;
bottom:10px;
}
p{
margin:0;
}
.container{
border:1px black solid;
margin:30px;
overflow:auto;
position:relative;
width:80%;
height:300px;
}
.container ul{
padding:0;
}
#x{
height:217px;
}
#x li,#xy li{
width:300px;
float:left;
}
h1{
color:#5B739C;
}
h1 strong{
font-size:13px;
color:#777;
}
#links{
border:1px solid black;
width:210px;
padding:10px;
float:right;
margin-top:-55px;
background-color:white;
}
#links h3{
color:#933;
margin:5px;
}
#links ul{
padding: 8px 0 3px 20px;
}
#links li{
list-style-type:circle;
}
#links a{
color:#69C;
}

View File

@ -0,0 +1,252 @@
<!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.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.min.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){
var link = e.target;
if (link.target === '_blank') {
return;
}
e.preventDefault();
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 $target = $('#pane-target');
$('#target-examples a').click(function() {
$target.stop(true);
});
$('#relative-selector').click(function() {
$target.scrollTo('li:eq(7)', 800);
});
$('#jquery-object').click(function() {
$target.scrollTo($('#pane-target li:eq(14)') , 800);
});
$('#dom-element').click(function() {
$target.scrollTo(document.getElementById('twenty'), 800);
});
$('#absolute-number').click(function() {
$target.scrollTo(150, 800);
});
$('#absolute-number-hash').click(function() {
$target.scrollTo({ top:800, left:700}, 800);
});
$('#absolute-px').click(function() {
$target.scrollTo('520px', 800);
});
$('#absolute-px-hash').click(function() {
$target.scrollTo({top:'110px', left:'290px'}, 800);
});
$('#relative-px').click(function() {
$target.scrollTo('+=100', 500);
});
$('#relative-px-hash').click(function() {
$target.scrollTo({top:'-=100px', left:'+=100'}, 500);
});
$('#percentage-px').click(function() {
$target.scrollTo('50%', 800);
});
$('#percentage-px-hash').click(function() {
$target.scrollTo({top:'50%', left:'20%'}, 800);
});
// Settings examples bindings, they will all scroll to the same place, with different settings
var $settings = $('#pane-settings');
$('#settings-examples a').click(function() {
// before each animation, reset to (0,0), skip this.
$settings.stop(true).scrollTo(0);
});
$('#settings-no').click(function() {
$settings.scrollTo('li:eq(15)', 1000);
});
$('#settings-axis').click(function() {// only scroll horizontally
$settings.scrollTo('li:eq(15)', 1000, { axis:'x' });
});
$('#settings-duration').click(function() {// it's the same as specifying it in the 2nd argument
$settings.scrollTo('li:eq(15)', { duration: 3000 });
});
$('#settings-easing').click(function() {
$settings.scrollTo('li:eq(15)', 2500, { easing:'elasout' });
});
$('#settings-margin').click(function() {//scroll to the "outer" position of the element
$settings.scrollTo('li:eq(15)', 1000, { margin:true });
});
$('#settings-offset').click(function() {//same as { top:-50, left:-50 }
$settings.scrollTo('li:eq(15)', 1000, { offset:-50 });
});
$('#settings-offset-hash').click(function() {
$settings.scrollTo('li:eq(15)', 1000, { offset:{ top:-5, left:-30 } });
});
$('#settings-offset-function').click(function() {
$settings.scrollTo('li:eq(15)', 1000, {offset: function() { return {top:-30, left:-5}; }});
});
$('#settings-over').click(function() {//same as { top:-50, left:-50 }
$settings.scrollTo('li:eq(15)', 1000, { over:0.5 });
});
$('#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 });
});
$('#settings-onAfter').click(function() {
$settings.scrollTo('li:eq(15)', 2000, {
onAfter:function() {
$('#settings-message').text('Got there!');
}
});
});
$('#settings-onAfterFirst').click(function() {//onAfterFirst exists only when queuing
$settings.scrollTo('li:eq(15)', 1600, {
queue:true,
onAfterFirst:function() {
$('#settings-message').text('Got there horizontally!');
},
onAfter:function() {
$('#settings-message').text('Got there vertically!');
}
});
});
$('#settings-step').click(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(_, 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>
</head>
<body>
<h1>jQuery.scrollTo&nbsp;<strong>by Ariel Flesler</strong></h1>
<div id="toc" class="part">
<h3>Table of contents&nbsp;<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('#settings-examples', 800, {easing:'elasout'});" href="#settings-examples">Settings</a></li>
</ul>
</div>
<div id="links" class="part">
<h3>Links</h3>
<ul>
<li><a target="_blank" href="https://github.com/flesler/jquery.scrollTo">Github</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://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&nbsp;<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(7)', 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(document.getElementById('twenty'), 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-px" href="#">Absolute px</a></li>
<li><a title="$(...).scrollTo({top:'110px', left:'290px'}, 800);" id="absolute-px-hash" href="#">Absolute px(hash)</a></li>
<li><a title="$(...).scrollTo('+=100px', 800);" id="relative-px" href="#">Relative px</a></li>
<li><a title="$(...).scrollTo({top:'-=100px', left:'+=100'}, 800);" id="relative-px-hash" href="#">Relative px(hash)</a></li>
<li><a title="$(...).scrollTo('50%', 800);" id="percentage-px" href="#">Percent</a></li>
<li><a title="$(...).scrollTo({top:'50%', left:'20%'}, 800);" id="percentage-px-hash" href="#">Percent(hash)</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 id="twenty"><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="settings-examples" class="section part">
<h3>Settings&nbsp;<span id="settings-message" class="message">The examples shown here, are summarized for brevity</span></h3>
<ul class="links">
<li><a title="$(...).scrollTo('li:eq(15)', 1000);" id="settings-no" href="#">no settings</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="settings-axis" href="#">axis</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {margin:true});//deduct the margin and border from the final position" id="settings-margin" href="#">margin</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {offset:-50});//add or deduct from the final position" id="settings-offset" href="#">offset</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {offset: {top:-5, left:-30} });" id="settings-offset-hash" href="#">offset(hash)</a></li>
<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="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">
<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>
</div>
</body>
</html>

View File

@ -0,0 +1,128 @@
<!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&nbsp;<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>

View File

@ -0,0 +1,210 @@
/*!
* jQuery.scrollTo
* Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
* Licensed under MIT
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
* @projectDescription Lightweight, cross-browser and highly customizable animated scrolling with jQuery
* @author Ariel Flesler
* @version 2.1.1
*/
;(function(factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof module !== 'undefined' && module.exports) {
// CommonJS
module.exports = factory(require('jquery'));
} else {
// Global
factory(jQuery);
}
})(function($) {
'use strict';
var $scrollTo = $.scrollTo = function(target, duration, settings) {
return $(window).scrollTo(target, duration, settings);
};
$scrollTo.defaults = {
axis:'xy',
duration: 0,
limit:true
};
function isWin(elem) {
return !elem.nodeName ||
$.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) !== -1;
}
$.fn.scrollTo = function(target, duration, settings) {
if (typeof duration === 'object') {
settings = duration;
duration = 0;
}
if (typeof settings === 'function') {
settings = { onAfter:settings };
}
if (target === 'max') {
target = 9e9;
}
settings = $.extend({}, $scrollTo.defaults, settings);
// Speed is still recognized for backwards compatibility
duration = duration || settings.duration;
// Make sure the settings are given right
var queue = settings.queue && settings.axis.length > 1;
if (queue) {
// Let's keep the overall duration
duration /= 2;
}
settings.offset = both(settings.offset);
settings.over = both(settings.over);
return this.each(function() {
// Null target yields nothing, just like jQuery does
if (target === null) return;
var win = isWin(this),
elem = win ? this.contentWindow || window : this,
$elem = $(elem),
targ = target,
attr = {},
toff;
switch (typeof targ) {
// A number will pass the regex
case 'number':
case 'string':
if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
targ = both(targ);
// We are done
break;
}
// Relative/Absolute selector
targ = win ? $(targ) : $(targ, elem);
if (!targ.length) return;
/* falls through */
case 'object':
// DOMElement / jQuery
if (targ.is || targ.style) {
// Get the real position of the target
toff = (targ = $(targ)).offset();
}
}
var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset;
$.each(settings.axis.split(''), function(i, axis) {
var Pos = axis === 'x' ? 'Left' : 'Top',
pos = Pos.toLowerCase(),
key = 'scroll' + Pos,
prev = $elem[key](),
max = $scrollTo.max(elem, axis);
if (toff) {// jQuery / DOMElement
attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]);
// If it's a dom element, reduce the margin
if (settings.margin) {
attr[key] -= parseInt(targ.css('margin'+Pos), 10) || 0;
attr[key] -= parseInt(targ.css('border'+Pos+'Width'), 10) || 0;
}
attr[key] += offset[pos] || 0;
if (settings.over[pos]) {
// Scroll to a fraction of its width/height
attr[key] += targ[axis === 'x'?'width':'height']() * settings.over[pos];
}
} else {
var val = targ[pos];
// Handle percentage values
attr[key] = val.slice && val.slice(-1) === '%' ?
parseFloat(val) / 100 * max
: val;
}
// Number or 'number'
if (settings.limit && /^\d+$/.test(attr[key])) {
// Check the limits
attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max);
}
// Don't waste time animating, if there's no need.
if (!i && settings.axis.length > 1) {
if (prev === attr[key]) {
// No animation needed
attr = {};
} else if (queue) {
// Intermediate animation
animate(settings.onAfterFirst);
// Don't animate this axis again in the next iteration.
attr = {};
}
}
});
animate(settings.onAfter);
function animate(callback) {
var opts = $.extend({}, settings, {
// The queue setting conflicts with animate()
// Force it to always be true
queue: true,
duration: duration,
complete: callback && function() {
callback.call(elem, targ, settings);
}
});
$elem.animate(attr, opts);
}
});
};
// Max scrolling position, works on quirks mode
// It only fails (not too badly) on IE, quirks mode.
$scrollTo.max = function(elem, axis) {
var Dim = axis === 'x' ? 'Width' : 'Height',
scroll = 'scroll'+Dim;
if (!isWin(elem))
return elem[scroll] - $(elem)[Dim.toLowerCase()]();
var size = 'client' + Dim,
doc = elem.ownerDocument || elem.document,
html = doc.documentElement,
body = doc.body;
return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]);
};
function both(val) {
return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val };
}
// Add special hooks so that window scroll properties can be animated
$.Tween.propHooks.scrollLeft =
$.Tween.propHooks.scrollTop = {
get: function(t) {
return $(t.elem)[t.prop]();
},
set: function(t) {
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);
}
}
};
// AMD requirement
return $scrollTo;
});

View File

@ -0,0 +1,7 @@
/**
* Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
* Licensed under MIT
* @author Ariel Flesler
* @version 2.1.1
*/
;(function(f){"use strict";"function"===typeof define&&define.amd?define(["jquery"],f):"undefined"!==typeof module&&module.exports?module.exports=f(require("jquery")):f(jQuery)})(function($){"use strict";function n(a){return!a.nodeName||-1!==$.inArray(a.nodeName.toLowerCase(),["iframe","#document","html","body"])}function h(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}var p=$.scrollTo=function(a,d,b){return $(window).scrollTo(a,d,b)};p.defaults={axis:"xy",duration:0,limit:!0};$.fn.scrollTo=function(a,d,b){"object"=== typeof d&&(b=d,d=0);"function"===typeof b&&(b={onAfter:b});"max"===a&&(a=9E9);b=$.extend({},p.defaults,b);d=d||b.duration;var u=b.queue&&1<b.axis.length;u&&(d/=2);b.offset=h(b.offset);b.over=h(b.over);return this.each(function(){function k(a){var k=$.extend({},b,{queue:!0,duration:d,complete:a&&function(){a.call(q,e,b)}});r.animate(f,k)}if(null!==a){var l=n(this),q=l?this.contentWindow||window:this,r=$(q),e=a,f={},t;switch(typeof e){case "number":case "string":if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(e)){e= h(e);break}e=l?$(e):$(e,q);if(!e.length)return;case "object":if(e.is||e.style)t=(e=$(e)).offset()}var v=$.isFunction(b.offset)&&b.offset(q,e)||b.offset;$.each(b.axis.split(""),function(a,c){var d="x"===c?"Left":"Top",m=d.toLowerCase(),g="scroll"+d,h=r[g](),n=p.max(q,c);t?(f[g]=t[m]+(l?0:h-r.offset()[m]),b.margin&&(f[g]-=parseInt(e.css("margin"+d),10)||0,f[g]-=parseInt(e.css("border"+d+"Width"),10)||0),f[g]+=v[m]||0,b.over[m]&&(f[g]+=e["x"===c?"width":"height"]()*b.over[m])):(d=e[m],f[g]=d.slice&& "%"===d.slice(-1)?parseFloat(d)/100*n:d);b.limit&&/^\d+$/.test(f[g])&&(f[g]=0>=f[g]?0:Math.min(f[g],n));!a&&1<b.axis.length&&(h===f[g]?f={}:u&&(k(b.onAfterFirst),f={}))});k(b.onAfter)}})};p.max=function(a,d){var b="x"===d?"Width":"Height",h="scroll"+b;if(!n(a))return a[h]-$(a)[b.toLowerCase()]();var b="client"+b,k=a.ownerDocument||a.document,l=k.documentElement,k=k.body;return Math.max(l[h],k[h])-Math.min(l[b],k[b])};$.Tween.propHooks.scrollLeft=$.Tween.propHooks.scrollTop={get:function(a){return $(a.elem)[a.prop]()}, set:function(a){var d=this.get(a);if(a.options.interrupt&&a._last&&a._last!==d)return $(a.elem).stop();var b=Math.round(a.now);d!==b&&($(a.elem)[a.prop](b),a._last=this.get(a))}};return p});

View File

@ -0,0 +1,20 @@
{
"name": "jquery.scrollto",
"version": "2.1.1",
"description": "Lightweight, cross-browser and highly customizable animated scrolling with jQuery",
"main": "jquery.scrollTo.js",
"license": "MIT",
"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", "ecosystem:jquery"],
"author": {
"name": "Ariel Flesler",
"web": "http://flesler.blogspot.com/"
}
}

View File

@ -0,0 +1,21 @@
<!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 - Test Element MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Element MaxY - Compat Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
</html>

View File

@ -0,0 +1,20 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Element MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Element MaxY - Quirks Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
</html>

View File

@ -0,0 +1,19 @@
<!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 - Test Window MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY - Compat Mode</h1>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
</html>

View File

@ -0,0 +1,18 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY - Quirks Mode</h1>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
</html>

View File

@ -0,0 +1,20 @@
<!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 - Test Window MaxY to Iframe - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Compat Mode</h1>
<iframe src="WinMaxY-compat.html?notest" style="width:500px" /></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
</html>

View File

@ -0,0 +1,19 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</h1>
<iframe src="WinMaxY-quirks.html?notest" style="width:500px"></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
</html>

View File

@ -0,0 +1,11 @@
<!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 - Test Window MaxY with Iframe - Compat Mode</title>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</h1>
<iframe src="WinMaxY-compat.html" />
</html>

View File

@ -0,0 +1,10 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</title>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</h1>
<iframe src="WinMaxY-quirks.html" />
</html>

View File

@ -0,0 +1,24 @@
<!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 Tests</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="Tests for jQuery ScrollTo. Made by Ariel Flesler." />
<meta name="robots" content="index,follow" />
</head>
<body>
<h1>jQuery.scrollTo Tests</h1>
<ul>
<li><a href="WinMaxY-compat.html">Max window scrolling (compat mode)</a></li>
<li><a href="WinMaxY-quirks.html">Max window scrolling (quirks mode)</a></li>
<li><a href="ElemMaxY-compat.html">Max element scrolling (compat mode)</a></li>
<li><a href="ElemMaxY-quirks.html">Max element scrolling (quirks mode)</a></li>
<li><a href="WinMaxY-with-iframe-compat.html">Max window scrolling, within an iframe (compat mode)</a></li>
<li><a href="WinMaxY-with-iframe-quirks.html">Max window scrolling, within an iframe (quirks mode)</a></li>
<li><a href="WinMaxY-to-iframe-compat.html">Max iframe scrolling from outside (compat mode)</a></li>
<li><a href="WinMaxY-to-iframe-quirks.html">Max iframe scrolling from outside (quirks mode)</a></li>
</ul>
</body>
</html>

View File

@ -0,0 +1,21 @@
$.fn.test = function(){
// Hide title on iframes
if (window.self !== window.top) {
$('h1').hide();
}
if (location.search === '?notest') {
return this;
}
$.scrollTo.defaults.axis = 'xy';
var root = this.is('iframe') ? this.contents() : $('body');
root.find('#ua').html(
navigator.userAgent +
'<br />' +
'document.compatMode is "' + document.compatMode + '"'
);
return this.scrollTo('max', 1000).scrollTo(0, 1000);
};