1.1.1 • Public • Published


    Build Status Dependency Status Licence Coverage Status Bower version npm version

    angular-scrollie exposes a service that allows you to set or animate the scrollTop of an angular element. Uses requestAnimationFrame to provide smooth animations and even polyfills it for old browsers.


    Install with bower:

    bower install angular-scrollie

    Or with npm:

    npm install angular-scrollie

    Or simply download the latest release.


    The pre-built files can be found in the dist/ directory. dist/angular-scrollie.min.js is minified and production-ready. Example usage:

    <script src="dist/angular-scrollie.min.js"></script>

    Add scrollie to your app's module dependencies:

    angular.module('myapp', ['scrollie']);

    And now you can use the scrollie service in your controllers, directives, services etc. Example usage in a controller:

    app.controller('MyController', [ '$scope', 'scrollie', function ($scope, scrollie) {
        var target = angular.element('#someElement');
        // To set scrollTop without animation, 10).then(function () {
            console.log('Called in next tick');
        // For animated scrolling in 400ms using easeInOutQuad easing, 10, 400).then(function () {
            console.log('Called after 400ms');
        // To stop a currently running animation:

    API, scrollTop [, duration [, easing]]) : Promise

    Animates the scrollTop of element from it's current scrollTop to the new scrollTop in a time-frame of duration and using the provided easing function (duration and easing are optional).

    It returns a $q promise object which is resolved when the animation is complete and is rejected if the animation is stopped.

    If duration is not provided or is not valid, then it sets the scrollTop without animating. Note that a promise is still returned but it gets fulfilled in the next tick.

    If no easing is provided and duration is provided then the default easing function used is easeInOutQuad.

    Calling on an element while an animation is currently ongoing will stop that animation and start a new one. Subsequently, the promise for that animation will be rejected.


    Stops any currently-running animation of scrollTop on element. stopping the animation results in rejecting the promise returned by


    Contributions are welcomed! Here are the contribution guidelines.

    First clone the repository and install dependencies:

    npm install

    To run tests:

    npm test

    To lint the code:

    npm run lint

    To make a production build:

    npm run build


    The MIT License


    npm i angular-scrollie

    DownloadsWeekly Downloads






    Last publish


    • joelmukuthu