|
| 1 | +# Smooth Scroll Plugin |
| 2 | + |
| 3 | +## Features |
| 4 | + |
| 5 | +### $.fn.smoothScroll |
| 6 | + |
| 7 | +* Allows for easy implementation of smooth scrolling for same-page links. |
| 8 | +* Works like this: `$('a').smoothScroll();` |
| 9 | +* Specify a containing element if you want: `$('#container a').smoothScroll();` |
| 10 | +* Exclude links if they are within a containing element: `$('#container a').smoothScroll({excludeWithin: ['.container2']});` |
| 11 | +* Exclude links if they match certain conditions: `$('a').smoothScroll({exclude: ['.rough','#chunky']});` |
| 12 | +* Adjust where the scrolling stops: `$('.backtotop').smoothScroll({offset: -100});` |
| 13 | +* Add a callback function that is triggered after the scroll is complete: `$('a').smoothScroll({afterScroll: function() { alert('we made it!'); }});` |
| 14 | +* Add back button support by including a history management plugin such as "Ben Alman's BBQ":http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html. See demo/bbq.html for an example of how to implement this. |
| 15 | + |
| 16 | +#### Options |
| 17 | + |
| 18 | +The following options, shown with their default values, are available for both `$.fn.smoothScroll` and `$.smoothScroll`: |
| 19 | + |
| 20 | + { |
| 21 | + exclude: [], |
| 22 | + excludeWithin:[], |
| 23 | + offset: 0, |
| 24 | + direction: 'top', // one of 'top' or 'left' |
| 25 | + scrollTarget: null, // only use if you want to override default behavior |
| 26 | + afterScroll: null, // function to be called after scrolling occurs. "this" is the triggering element |
| 27 | + easing: 'swing', |
| 28 | + speed: 400 |
| 29 | + } |
| 30 | + |
| 31 | +### $.smoothScroll |
| 32 | + |
| 33 | +* Utility method works without a selector: `$.smoothScroll()` |
| 34 | +* Can be used to scroll any element (not just `document.documentElement` / `document.body`) |
| 35 | +* Doesn't automatically fire, so you need to bind it to some other user interaction. For example: |
| 36 | + |
| 37 | + $('button.scrollsomething').click(function() { |
| 38 | + $.smoothScroll({ |
| 39 | + scrollElement: $('div.scrollme'), |
| 40 | + scrollTarget: '#findme' |
| 41 | + }); |
| 42 | + return false; |
| 43 | + }); |
| 44 | + |
| 45 | +* The `$.smoothScroll` method can take one or two arguments. |
| 46 | + * If the first argument is a number, the document is scrolled to that position. If it's an options map, those options determine how the document (or other element) will be scrolled. |
| 47 | + * If a number is provided as the second argument, it will override whatever may have been set for the `scrollTarget` option. |
| 48 | + |
| 49 | +#### Additional Option |
| 50 | +The following option, in addition to those listed above, is available for `$.smoothScroll`: |
| 51 | + |
| 52 | + { |
| 53 | + // jQuery set of elements you wish to scroll. |
| 54 | + // if null (default), $('html, body').firstScrollable() is used. |
| 55 | + scrollElement: null, |
| 56 | + } |
| 57 | + |
| 58 | +### $.fn.scrollable |
| 59 | + |
| 60 | +* Selects the matched element(s) that are scrollable. Acts just like a DOM traversal method such as `.find()` or `.next()`. |
| 61 | +* The resulting jQuery set may consist of **zero, one, or multiple** elements. |
| 62 | + |
| 63 | +### $.fn.firstScrollable |
| 64 | + |
| 65 | +* Selects the first matched element that is scrollable. Acts just like a DOM traversal method such as `.find()` or `.next()`. |
| 66 | +* The resulting jQuery set may consist of **zero or one** element. |
| 67 | +* This method is used *internally* by the plugin to determine which element to use for "document" scrolling: `$('html, body').firstScrollable().animate({scrollTop: someNumber}, someSpeed)` |
| 68 | + |
| 69 | +## Notes |
| 70 | + |
| 71 | +* The plugin's `$.fn.smoothScroll` and `$.smoothScroll` methods use the `$.fn.firstScrollable` DOM traversal method (also defined by this plugin) to determine which |
0 commit comments