Readme

Author: mrjoelkemp

README.md

@@ -1,16 +1,17 @@
-For when you hit the bottom... of a dom element while scrolling.
+For when you hit the bottom (or top)... of a dom element while scrolling.
 
 ### Motivation
 
-Infinite scrolling plugins do **way too much**: 
-internally keep track of a scroll hitting the bottom of an element, fetch, then render, and rebind.
+Infinite scroll plugins do **way too much**:
+internally keeping track of a scroll hitting the bottom of an element, fetching data,
+rerendering, and then rebinding to repeat the process.
 
-If you have a backbone app that requires infinite scrolling, then you often 
+If you have a backbone app that requires infinite scrolling, then you often
 have a list view that listens to a collection and handles rendering. **Infinite scrolling
 should be as simple as being notified when you've hit the bottom of the (scrollable) element,
 and letting you call fetch on the proper collection.**
 
-After you've `smack`ed the bottom, you have the option to call smack (if you want to be notified again).
+After you've `smack`ed the bottom (or top), you have the option to call smack (if you want to be notified again).
 For example, after you've loaded another page of results, you would want to detect when you've
 smacked the bottom of the element. If you don't have any more results, then you wouldn't want to keep being notified.
 
@@ -20,7 +21,7 @@ http://jsfiddle.net/TLdSW/3/
 
 ### Usage
 
-Detect when you've scrolled to the bottom of the element
+Detect when you've smacked to the bottom (default) of the element
 
 ```javascript
 $(selector).smack()
@@ -29,21 +30,44 @@ $(selector).smack()
     });
 ```
 
-Detect when you've scrolled through 80% of the element
+Detect when you've smacked the top of the element
+
+```javascript
+$(selector).smack({ edge: 'top' })
+    .done(function () {
+    });
+```
+
+
+Detect when you've smacked 80% of the way to the bottom of the element
 
 ```javascript
 $(selector).smack({ threshold: 0.8 })
     .done(function () {
-      // Do stuff like fetch from a collection
     });
 ```
 
-Detect when you've scrolled within 200px of the bottom of the element
+Detect when you've smacked 80% of the way to the top of the element
+
+```javascript
+$(selector).smack({ edge: 'top', threshold: 0.8 })
+    .done(function () {
+    });
+```
+
+Detect when you've smacked within 200px of the bottom of the element
 
 ```javascript
 $(selector).smack({ threshold: '200px' })
     .done(function () {
-      // Do stuff like fetch from a collection
+    });
+```
+
+Detect when you've smacked within 200px of the top of the element
+
+```javascript
+$(selector).smack({ edge: 'top', threshold: '200px' })
+    .done(function () {
     });
 ```
 
@@ -52,8 +76,7 @@ Detect when smacking the bottom of the page itself
 ```javascript
 $(window).smack()
     .done(function () {
-      // Do stuff like fetch from a collection
-    });    
+    });
 ```
 
 ### Example infinite scroll
@@ -81,13 +104,11 @@ var that = this;
 * represents scrolling through anywhere from 0 to 100% of the element or, if a pixel value is supplied,
 the distance from the bottom of the element
 
-* default = 1; you're notified when you hit the bottom of the element
+* default = 1; you're notified when you hit the bound edge of the element
+
+*edge*: allows you to bind to either the `'top'` or `'bottom'` (default) edge of an element
 
 ### Building & Testing
 
 * To build, run `npm install` and then `grunt`
-* To run the tests, point your browser to `test/runner.html`
-
-### Changelog
-
-v1.1 Threshold supports pixel values (thanks @TheBox193)
+* To run the tests, point your browser to `test/runner.html`