|
1 | | -# jQuery.ScrollTo |
2 | | - |
3 | | -### Installation and usage |
4 | | - |
5 | | -Using [bower](https://github.com/twitter/bower): |
6 | | -```bash |
7 | | -bower install jquery.scrollTo |
8 | | -``` |
9 | | -Using [composer](http://getcomposer.org/download/): |
10 | | - |
11 | | -Either run |
12 | | - |
13 | | -``` |
14 | | -php composer.phar require --prefer-dist flesler/jquery.scrollto "*" |
15 | | -``` |
16 | | - |
17 | | -or add |
18 | | - |
19 | | -``` |
20 | | -"flesler/jquery.scrollto": "*" |
21 | | -``` |
22 | | - |
23 | | -to the require section of your composer.json. |
24 | | - |
25 | | -### Downloading Manually |
26 | | - |
27 | | -If you want the latest stable version, get the latest release from the [releases page](https://github.com/flesler/jquery.scrollTo/releases). |
28 | | - |
29 | | -### Notes |
30 | | - |
31 | | -* Apart from the target and duration, the plugin can receive a hash of settings. Documentation and examples are included in the source file. |
32 | | - |
33 | | -* If you are interested in animated "same-page-scrolling" using anchors(href="#some_id"), check http://github.com/flesler/jquery.localScroll |
34 | | - |
35 | | -* For a slideshow-like behavior using scrolling, check http://github.com/flesler/jquery.serialScroll |
36 | | - |
37 | | -* The target can be specified as: |
38 | | - * A Number/String specifying a position using px or just the number. |
39 | | - * A string selector that will be relative, to the element that is going to be scrolled, and must match at least one child. |
40 | | - * A DOM element, logically child of the element to scroll. |
41 | | - * A hash { top:x, left:y }, x and y can be any kind of number/string like described above. |
42 | | - |
43 | | -* The plugin supports relative animations |
44 | | - |
45 | | -* 'em' and '%' are not supported as part of the target, because they won't work with jQuery.fn.animate. |
46 | | - |
47 | | -* The plugin might fail to scroll an element, to an inner node that is nested in more scrollable elements. This seems like an odd situation anyway. |
48 | | - |
49 | | -* Both axes ( x, y -> left, top ) can be scrolled, you can send 'x', 'y', 'xy' or 'yx' as 'axis' inside the settings. |
50 | | - |
51 | | -* If 2 axis are scrolled, there's an option to queue the animations, so that the second will start once the first ended ('xy' and 'yx' will have different effects) |
52 | | - |
53 | | -* The option 'margin' can be set to true, then the margin of the target element, will be taken into account and will be deducted. |
54 | | - |
55 | | -* 'margin' will only be valid, if the target is a selector, a DOM element, or a jQuery Object. |
56 | | - |
57 | | -* The option 'offset' allows to scroll less or more than the actual target by a defined amount of pixels. Can be a number(both axes), { top:x, left:y } or a function that returns an object with top & left. |
58 | | - |
59 | | -* The option 'over' lets you add or deduct a fraction of the element's height and width from the final position. so over:0.5 will scroll to the middle of the object. can be specified with {top:x, left:y} |
60 | | - |
61 | | -* Don't forget the callback event is now called 'onAfter', and if queuing is activated, then 'onAfterFirst' can be used. |
62 | | - |
63 | | -* If the first axis to be scrolled, is already positioned, that animation will be skipped, to avoid a delay in the animation. |
64 | | - |
65 | | -* The call to the plugin can be made in 2 different ways: $(...).scrollTo( target, duration, settings ) or $(...).scrollTo( target, settings ). Where one of the settings is 'duration'. |
66 | | - |
67 | | -* If you find any bug, or you have any advice, don't hesitate to open an issue. |
| 1 | +# jQuery.ScrollTo |
| 2 | + |
| 3 | +### Installation and usage |
| 4 | + |
| 5 | +Using [bower](https://github.com/twitter/bower): |
| 6 | +```bash |
| 7 | +bower install jquery.scrollTo |
| 8 | +``` |
| 9 | +Using npm: |
| 10 | +```bash |
| 11 | +npm install jquery.scrollto |
| 12 | +``` |
| 13 | +Using [composer](http://getcomposer.org/download/): |
| 14 | + |
| 15 | +Either run |
| 16 | + |
| 17 | +``` |
| 18 | +php composer.phar require --prefer-dist flesler/jquery.scrollto "*" |
| 19 | +``` |
| 20 | + |
| 21 | +or add |
| 22 | + |
| 23 | +``` |
| 24 | +"flesler/jquery.scrollto": "*" |
| 25 | +``` |
| 26 | + |
| 27 | +to the require section of your composer.json. |
| 28 | + |
| 29 | +### Downloading Manually |
| 30 | + |
| 31 | +If you want the latest stable version, get the latest release from the [releases page](https://github.com/flesler/jquery.scrollTo/releases). |
| 32 | + |
| 33 | +### Notes |
| 34 | + |
| 35 | +* Apart from the target and duration, the plugin can receive a hash of settings. Documentation and examples are included in the source file. |
| 36 | + |
| 37 | +* If you are interested in animated "same-page-scrolling" using anchors(href="#some_id"), check http://github.com/flesler/jquery.localScroll |
| 38 | + |
| 39 | +* For a slideshow-like behavior using scrolling, check http://github.com/flesler/jquery.serialScroll |
| 40 | + |
| 41 | +* The target can be specified as: |
| 42 | + * A Number/String specifying a position using px or just the number. |
| 43 | + * A string selector that will be relative, to the element that is going to be scrolled, and must match at least one child. |
| 44 | + * A DOM element, logically child of the element to scroll. |
| 45 | + * A hash { top:x, left:y }, x and y can be any kind of number/string like described above. |
| 46 | + |
| 47 | +* The plugin supports relative animations |
| 48 | + |
| 49 | +* 'em' and '%' are not supported as part of the target, because they won't work with jQuery.fn.animate. |
| 50 | + |
| 51 | +* The plugin might fail to scroll an element, to an inner node that is nested in more scrollable elements. This seems like an odd situation anyway. |
| 52 | + |
| 53 | +* Both axes ( x, y -> left, top ) can be scrolled, you can send 'x', 'y', 'xy' or 'yx' as 'axis' inside the settings. |
| 54 | + |
| 55 | +* If 2 axis are scrolled, there's an option to queue the animations, so that the second will start once the first ended ('xy' and 'yx' will have different effects) |
| 56 | + |
| 57 | +* The option 'margin' can be set to true, then the margin of the target element, will be taken into account and will be deducted. |
| 58 | + |
| 59 | +* 'margin' will only be valid, if the target is a selector, a DOM element, or a jQuery Object. |
| 60 | + |
| 61 | +* The option 'offset' allows to scroll less or more than the actual target by a defined amount of pixels. Can be a number(both axes), { top:x, left:y } or a function that returns an object with top & left. |
| 62 | + |
| 63 | +* The option 'over' lets you add or deduct a fraction of the element's height and width from the final position. so over:0.5 will scroll to the middle of the object. can be specified with {top:x, left:y} |
| 64 | + |
| 65 | +* Don't forget the callback event is now called 'onAfter', and if queuing is activated, then 'onAfterFirst' can be used. |
| 66 | + |
| 67 | +* If the first axis to be scrolled, is already positioned, that animation will be skipped, to avoid a delay in the animation. |
| 68 | + |
| 69 | +* The call to the plugin can be made in 2 different ways: $(...).scrollTo( target, duration, settings ) or $(...).scrollTo( target, settings ). Where one of the settings is 'duration'. |
| 70 | + |
| 71 | +* If you find any bug, or you have any advice, don't hesitate to open an issue. |
0 commit comments