diff --git a/README.md b/README.md index f2eaa3e..67b55a4 100644 --- a/README.md +++ b/README.md @@ -1,258 +1,4 @@ angular-scroll ============== -Only dependent on AngularJS (no jQuery). 8K minified or 2K gzipped. - -Example -------- -Check out [the live demo](http://durated.github.io/angular-scroll/) or the [source code](https://github.com/durated/angular-scroll/blob/master/example/index.html). - -Install -------- -With bower: - - $ bower install angular-scroll - -Or download the [production version](https://raw.github.com/durated/angular-scroll/master/angular-scroll.min.js) or the [development version](https://raw.github.com/durated/angular-scroll/master/angular-scroll.js). - -Don't forget to add `duScroll` to your module dependencies. - -`angular.element` Scroll API ----------------------------- - -This module extends the `angular.element` object with a few jQuery like functions. Note that `$document` is an `angular.element`, for usage example see below. - -#### `.scrollTo( left, top [, duration [, easing ] ] )` -Scrolls the element/window to the specified left/top position. If `duration` is specified the scrolling is animated for n milliseconds. If `easing` is ommited the animation will default to the `duScrollEasing` function. - -#### `.scrollTo( element [, offset, [, duration [, easing ] ] ] )` -Alias of `.scrollToElement`. - -#### `.scrollToElement( element [, offset, [, duration [, easing ] ] ] )` -Scrolls to the specified element, if `offset` is passed it will be subtracted from the elements position which is good if one uses floating menus. - -#### `.scrollToElementAnimated( element [, offset, [, duration [, easing ] ] ] )` -Convenience function. Works exactly the same as `scrollToElement` but uses the default values from `duScrollOffset`, `duScrollDuration` and `duScrollEasing` unless otherwise specified. - -#### `.scrollTop|scrollLeft( )` -Returns current scroll position. - -#### `.scrollTop|scrollLeft( top [, duration [, easing ] ] )` -Scrolls to specified position in either axis, with optional animation. - -#### `.scrollTopAnimated|scrollLeftAnimated( top [, duration [, easing ] ] )` -Convenience function like `scrollToElementAnimated` but for `scrollTop`/`scrollLeft`. - -#### Promises -Animated scrolling returns a `$q` promise, it will resolve when the scrolling has finished or be rejected if cancelled (by starting another scroll animation before it finished). - -#### Example -```js -angular.module('myApp', ['duScroll']). - controller('myCtrl', function($scope, $document) { - var top = 400; - var duration = 2000; //milliseconds - - //Scroll to the exact position - $document.scrollTop(top, duration).then(function() { - console && console.log('You just scrolled to the top!'); - }); - - var offset = 30; //pixels; adjust for floating menu, context etc - //Scroll to #some-id with 30 px "padding" - //Note: Use this in a directive, not with document.getElementById - var someElement = angular.element(document.getElementById('some-id')); - $document.scrollToElement(someElement, offset, duration); - } -); -``` - -The above example can be achieved by configuration instead of arguments: - -```js -angular.module('myApp', ['duScroll']) - .value('duScrollDuration', 2000) - .value('duScrollOffset', 30) - .controller('myCtrl', function($scope, $document) { - $document.scrollTopAnimated(400).then(function() { - console && console.log('You just scrolled to the top!'); - }); - - var someElement = angular.element(document.getElementById('some-id')); - $document.scrollToElementAnimated(someElement); - } -); -``` - - -Directives ----------- - -### `du-smooth-scroll` -Provides smooth anchor scrolling. -```html -Scroll it! -``` - -### `du-scrollspy` -Observes whether the target element is at the top of the viewport (or container) and adds an `active` class if so. Takes optional `offset` and `duration` attributes which is passed on to `.scrollTo`, - -```html -Am i active? -``` - -or together with Bootstrap - -```html -
-``` - -### `du-spy-context` -Enables multiple sets of spies on the same target element. Takes optional `offset` attribute to - -```html - - -``` -### `du-scroll-container` -Modifies behavior of `du-scrollspy` and `du-smooth-scroll` to observe/scroll within and element instead of the window/document. Good for modals/elements with `overflow: auto/scroll`. - -```html -This is the top
-Scroll to me, or the top
-