Release 1.7 (#4094)
* Minor fixes in the Deployment doc Signed-off-by: Michail Kargakis <mkargaki@redhat.com> * add NodeRestriction to admission-controllers (#3842) * Admins Can Configure Zones in Storage Class The PR #38505 (https://github.com/kubernetes/kubernetes/pull/38505) added zones optional parameter to Storage Class for AWS and GCE provisioners. That's why documentation needs to be updated accordingly. * document custom resource definitions * add host paths to psp (#3971) * add host paths to psp * add italics * Update ConfigMap doc to explain TTL-based cache updates (#3989) * Update ConfigMap doc to explain TTL-based cache updates * swap word order Change "When a ConfigMap being already consumed..." to "When a ConfigMap already being consumed..." * Update NetworkPolicy docs for v1 * StorageOS Volume plugin * Update GPU docs * docs: HPA autoscaling/v2alpha1 status conditions This commit documents the new status conditions feature for HPA autoscaling/v2alpha1. It demonstrates how to get the status conditions using `kubectl describe`, and how to interpret them. * Update description about NodeRestriction kubelet node can alse create mirror pods for their own static pods. * adding storage as a supported resource to node allocatable Signed-off-by: Vishnu kannan <vishnuk@google.com> * Add documentation for podpreset opt-out annotation This adds the annotation for having the podpreset admission controller to skip (opt-out) manipulating the pod spec. Also, the annotation format for what presets have acted on a pod has been modified to add a prefix of "podpreset-". The new naming makes it such that there is no chance of collision with the newly introduced opt-out annotation (or future ones yet to be added). Opt-out annotation PR: kubernetes/kubernetes#44965 * Update PDB documentation to explain new field (#3885) * update-docs-pdb * Addressed erictune@'s comments * Fix title and add a TOC to the logging concept page * Patch #4118 for typos * Describe setting coredns server in nameserver resolv chain * Address comments in PR #3997. Comment is in https://github.com/kubernetes/kubernetes.github.io/pull/3997/files/f6eb59c67e28efc298c87b1ef49a96bc6adacd1e#diff-7a14981f3dd8eb203f897ce6c11d9828 * Update task for DaemonSet history and rollback (#4098) * Update task for DaemonSet history and rollback Also remove mentions of templateGeneration field because it's deprecated * Address comments * removed lt and gt as operators (#4152) * removed lt and gt as operators * replace lt and gt for node-affinfity * updated based on bsalamat review * Initial draft of upgrade guide for kubeadm clusters. In-place upgrades are supported between 1.6 and 1.7 releases. Rollback instructions to come in a separate commit. Fixes https://github.com/kubernetes/kubeadm/issues/278 * Add local volume documentation (#4050) * Add local volume documentation * Add PV local volume example * Patch PR #3999 * Add documentation for Stackdriver event exporter * Add documentation about controller metrics * Federation: Add task for setting up placement policies (#4075) * Add task for setting up placement policies * Update version of management sidecar in policy engine deployment * Address @nikhiljindal's comments - Lower case filenames - Comments in policy - Typo fixes - Removed type LoadBalancer from OPA Service * Add example that sets cluster selector Per-@nikhiljindal's suggestion * Fix wording and templating per @chenopis * PodDisruptionBudget documentation Improvements (#4140) * Changes from #3885 Title: Update PDB documentation to explain new field Author: foxish * Added Placeholder Disruptions Concept Guide New file: docs/concepts/workloads/pods/disruptions.md Intented contents: concept for Pod Disruption Budget, cross reference to Eviction and Preemption docs. Linked from: concepts > workloads > pods * Added placeholder Configuring PDB Task New file: docs/tasks/run-application/configure-pdb.md Intented contents: task for writing a Pod Disruption Budget. Linked from: tasks > configuring-applications > configure pdb. * Add refs to the "drain a node" task. * Refactor PDB docs. Move the "Requesting an eviction" section from: docs/tasks/administer-cluster/configure-pod-disruption-budget.md -- which is going away -- to: docs/tasks/administer-cluster/safely-drain-node.md The move is verbatim, except for an introductory sentence. Also added assignees. * Refactor of PDB docs Moved the section: Specifying a PodDisruptionBudget from: docs/tasks/administer-cluster/configure-pod-disruption-budget.md to: docs/tasks/run-application/configure-pdb.md because that former file is going away. Move is verbatim. * Explain how Eviction tools should handle failures * Refactor PDB docs Move text from: docs/tasks/administer-cluster/configure-pod-disruption-budget.md to: docs/concepts/workloads/pods/disruptions.md Delete the now empty: docs/tasks/administer-cluster/configure-pod-disruption-budget.md Added a redirects_from section to the new doc, containing the path of the now-deleted doc, plus all the redirects from the deleted doc. * Expand PDB Concept guide Building on a little content from the old task, greatly expanded the Disruptions concept guide, including an abstract example. * Update creating a pdb Task. * Address review comments. * Fixed for all cody-clark's review comments * Address review comments from mml * Address review comments from maisem * Fix missing backtick * Api and Kubectl reference docs updates for 1.7 (#4193) * Fix includes groups * Generated kubectl docs for 1.7 * Generated references docs for 1.7 api * Document node authorization mode * API Aggregator (#4173) * API Aggregator * Additional bullet points * incorporated feedback for apiserver-aggregation.md * split setup-api-aggregator.md into two docs and address feedback * fix link * addressed docs feedback * incorporate feedback * integrate feedback * Add documentation for DNS stub domains (#4063) * Add documentation for DNS stub domains * add additional prereq * fix image path * review feedback * minor grammar and style nits * documentation for using hostAliases to manage hosts file (#4080) * documentation for using hostAliases to manage hosts file * add to table of contents * review comments * update the right command to see hosts file * reformat doc based on suggestion and change some wording * Fix typo for #4080 * Patch PR #4063 * Fix wording in placement policy task introduction * Add update to statefulset concepts and basic tutorial (#4174) * Add update to statefulset concpets and basic tutorial * Address tech comments. * Update ESIPP docs for new added API fields * Custom resource docs * update audit document with advanced audit features added in 1.7 * kubeadm v1.7 documentation updates (#4018) * v1.7 updates for kubeadm * Address review comments * Address Luke's comments * Encrypting secrets at rest and cluster security guide * Edits for Custom DNS Documentation (#4207) * reorganize custom dns doc * format fixes * Update version numbers to 1.7 * Patch PR #4140 (#4215) * Patch PR #4140 * fix link and typos * Update PR template * Update TLS bootstrapping with 1.7 features This includes documenting the new CSR approver built into the controller manager and the kubelet alpha features for certificate rotation. Since the CSR approver changed over the 1.7 release cycle we need to call out the migration steps for those using the alpha feature. This document as a whole could probably use some updates, but the main focus of this PR is just to get these features minimally documented before the release. * Federated ClusterSelector formatting updates from review * complete PR #4181 (#4223) * complete PR #4181 * fix security link * Extensible admission controller (#4092) * extensible-admission-controllers * Update extensible-admission-controllers.md * more on initializers * fixes * Expand external admission webhooks documentation * wrap at 80 chars * more * add reference * Use correct apigroup for network policy * Docs changes to PR #4092 (#4224) * Docs changes to PR #4092 * address feedback * add doc for --as-group in cli Add doc for this pr: https://github.com/kubernetes/kubernetes/pull/43696
This commit is contained in:
zhangchaolei
+41
@@ -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": ", "
|
||||
}
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"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
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
lib-cov
|
||||
*.seed
|
||||
*.log
|
||||
*.csv
|
||||
*.dat
|
||||
*.out
|
||||
*.pid
|
||||
*.gz
|
||||
|
||||
pids
|
||||
logs
|
||||
results
|
||||
|
||||
node_modules
|
||||
npm-debug.log
|
||||
.DS_Store
|
||||
+186
@@ -0,0 +1,186 @@
|
||||
# Changelog
|
||||
|
||||
## 2.1.2
|
||||
### Fix
|
||||
- Plugin won't break if an empty jQuery object is passed, it's now consistent with selector target #121
|
||||
### Docs
|
||||
- Converted the CHANGELOG to Markdown
|
||||
|
||||
## 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).
|
||||
+22
@@ -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.
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
# jQuery.scrollTo
|
||||
|
||||
Lightweight, cross-browser and highly customizable animated scrolling with jQuery
|
||||
|
||||
[](http://badge.fury.io/gh/flesler%2Fjquery.scrollTo)
|
||||
[](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.
|
||||
+28
@@ -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/"
|
||||
}
|
||||
}
|
||||
+32
@@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
+150
@@ -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;
|
||||
}
|
||||
+69
@@ -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;
|
||||
}
|
||||
+252
@@ -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 <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('#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 <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 <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>
|
||||
+128
@@ -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 <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>
|
||||
+210
@@ -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.2
|
||||
*/
|
||||
;(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);
|
||||
/* falls through */
|
||||
case 'object':
|
||||
if (targ.length === 0) return;
|
||||
// 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;
|
||||
});
|
||||
+7
@@ -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.2
|
||||
*/
|
||||
;(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);case "object":if(e.length===0)return;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});
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
{
|
||||
"_args": [
|
||||
[
|
||||
{
|
||||
"raw": "jquery.scrollto@^2.1.2",
|
||||
"scope": null,
|
||||
"escapedName": "jquery.scrollto",
|
||||
"name": "jquery.scrollto",
|
||||
"rawSpec": "^2.1.2",
|
||||
"spec": ">=2.1.2 <3.0.0",
|
||||
"type": "range"
|
||||
},
|
||||
"/brodocs"
|
||||
]
|
||||
],
|
||||
"_from": "jquery.scrollto@>=2.1.2 <3.0.0",
|
||||
"_id": "jquery.scrollto@2.1.2",
|
||||
"_inCache": true,
|
||||
"_location": "/jquery.scrollto",
|
||||
"_nodeVersion": "0.12.0",
|
||||
"_npmUser": {
|
||||
"name": "flesler",
|
||||
"email": "aflesler@gmail.com"
|
||||
},
|
||||
"_npmVersion": "2.5.1",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"raw": "jquery.scrollto@^2.1.2",
|
||||
"scope": null,
|
||||
"escapedName": "jquery.scrollto",
|
||||
"name": "jquery.scrollto",
|
||||
"rawSpec": "^2.1.2",
|
||||
"spec": ">=2.1.2 <3.0.0",
|
||||
"type": "range"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/jquery.scrollto/-/jquery.scrollto-2.1.2.tgz",
|
||||
"_shasum": "e7580d9c7ac46ef5bb25319483f6f45713fd7c6c",
|
||||
"_shrinkwrap": null,
|
||||
"_spec": "jquery.scrollto@^2.1.2",
|
||||
"_where": "/brodocs",
|
||||
"author": {
|
||||
"name": "Ariel Flesler",
|
||||
"url": "http://flesler.blogspot.com/"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/flesler/jquery.scrollTo/issues"
|
||||
},
|
||||
"demo": "http://demos.flesler.com/jquery/scrollTo/",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8"
|
||||
},
|
||||
"description": "Lightweight, cross-browser and highly customizable animated scrolling with jQuery",
|
||||
"devDependencies": {},
|
||||
"directories": {},
|
||||
"dist": {
|
||||
"shasum": "e7580d9c7ac46ef5bb25319483f6f45713fd7c6c",
|
||||
"tarball": "https://registry.npmjs.org/jquery.scrollto/-/jquery.scrollto-2.1.2.tgz"
|
||||
},
|
||||
"docs": "https://github.com/flesler/jquery.scrollTo/",
|
||||
"download": "https://github.com/flesler/jquery.scrollTo/releases",
|
||||
"gitHead": "d33ae4515be21a76bb7907c94dd8a0ca0de7e49b",
|
||||
"homepage": "https://github.com/flesler/jquery.scrollTo/",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"demo",
|
||||
"tests",
|
||||
"CHANGELOG",
|
||||
"README.md",
|
||||
"composer.json",
|
||||
"bower.json"
|
||||
],
|
||||
"keywords": [
|
||||
"browser",
|
||||
"animated",
|
||||
"animation",
|
||||
"scrolling",
|
||||
"scroll",
|
||||
"links",
|
||||
"anchors",
|
||||
"jquery",
|
||||
"jquery-plugin",
|
||||
"ecosystem:jquery"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "jquery.scrollTo.js",
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "flesler",
|
||||
"email": "aflesler@gmail.com"
|
||||
}
|
||||
],
|
||||
"name": "jquery.scrollto",
|
||||
"optionalDependencies": {},
|
||||
"readme": "ERROR: No README data found!",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/flesler/jquery.scrollTo.git"
|
||||
},
|
||||
"scripts": {},
|
||||
"version": "2.1.2"
|
||||
}
|
||||
+21
@@ -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">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$('#viewport').test();
|
||||
</script>
|
||||
</html>
|
||||
+20
@@ -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">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$('#viewport').test();
|
||||
</script>
|
||||
</html>
|
||||
+19
@@ -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">
|
||||
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(window).test();
|
||||
</script>
|
||||
</html>
|
||||
+18
@@ -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">
|
||||
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(window).test();
|
||||
</script>
|
||||
</html>
|
||||
Generated
Vendored
+20
@@ -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>
|
||||
Generated
Vendored
+19
@@ -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>
|
||||
Generated
Vendored
+11
@@ -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>
|
||||
Generated
Vendored
+10
@@ -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>
|
||||
+24
@@ -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>
|
||||
+21
@@ -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);
|
||||
};
|
||||
Reference in New Issue
Block a user