Only dependent on AngularJS (no jQuery). 3.4K minified or 0.7K gzipped.
Check out the live demo or the source code.
With bower:
$ bower install angular-scroll
Or download the production version or the development version.
angular.module('myApp', ['duScroll']).
controller('MyCtrl', function($scope, $rootScope){
$rootScope.$on('$duScrollChanged', function($event, scrollY) {
console.log('Scrolled to ', scrollY);
});
}
);
<a href="#anchor" du-smooth-scroll>Scroll it!</a>
<a href="#anchor" du-scrollspy>Am i active?</a>
<ul class="nav navbar-nav">
<li du-scrollspy="anchor"><a href="#anchor">Link</a></li>
</ul>
<ul du-spy-context class="nav navbar-nav">
<li du-scrollspy="anchor"><a href="#anchor">Link</a></li>
</ul>
<ul du-spy-context class="nav navbar-nav">
<li du-scrollspy="anchor"><a href="#anchor">Link</a></li>
</ul>
angular.module('myApp', ['duScroll']).
controller('myCtrl', function(scroller) {
var x = 0;
var y = 400;
var duration = 2000; //milliseconds
//Scroll to the exact position
scroller.scrollTo(x, y, duration);
var chunk = 200;
//Scroll 200px down from current scroll position
scroller.scrollDelta(x, chunk, duration);
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
scroller.scrollToElement(document.getElementById('some-id'), offset, duration);
}
);
Duration is defined in milliseconds.
To set a scroll duration on a single anchor:
<a href="#anchor" du-smooth-scroll duration="5000">Scroll it!</a>
To change the default duration:
angular.module('myApp', ['duScroll']).value('duScrollDuration', 5000);
Set the duScrollEasing
value to a function that takes and returns a value between 0 to 1.
function invertedEasingFunction(x) {
return 1-x;
}
angular.module('myApp', ['duScroll']).value('duScrollEasing', invertedEasingFunction);
The duScrollspy
directive fires the global events duScrollspy:becameActive
and duScrollspy:becameInactive
with an angular.element wrapped element as first argument. This is nice to have if you want the URL bar to reflect where on the page the visitor are, like this:
angular.module('myApp', ['duScroll']).
config(function($locationProvider) {
$locationProvider.html5Mode(true);
}).
run(function($rootScope, $location){
$rootScope.$on('duScrollspy:becameActive', function($event, $element){
//Automaticly update location
var hash = $element.prop('hash');
if(hash) {
$location.hash(hash.substr(1)).replace();
$rootScope.$apply();
}
});
});
$ grunt