Another option is to utilize the angular-scroll plugin, available at "https://github.com/durated/angular-scroll/". This tool provides smooth scrolling and includes various easing functions for a polished appearance.

Brett's solution was really helpful for me. I made some tweaks to improve modularization and testability.

If you're interested, here's another example on JsFiddle showcasing the updated version with added testing.

For testing purposes, I've been using Karma and Jasmine. The function signature has been adjusted slightly:

 anchorSmoothScroll.scrollTo(elementId, speed);

Now, the element is a required attribute for scrolling, while speed is optional with a default value of 20 (same as before).

If you're looking to incorporate smooth scrolling functionality, consider utilizing ngSmoothScroll. Check it out here: https://github.com/d-oliveros/ngSmoothScroll.

To implement this feature, simply add the smoothScroll module as a dependency and utilize it in the following manner:

<a href="#" scroll-to="my-element-3">Click me!</a>

None of the suggestions provided address the original request made by the OP, which was to enable smooth scrolling with $anchorScroll. The key difference between smooth scrolling directives and $anchroScroll is that the latter utilizes and modifies $location.hash(), which may be more suitable in certain situations.

For those looking for a solution, here is a link to a simple module that can replace $anchorScroll scrolling with smooth scrolling functionality. This module relies on the https://github.com/oblador/angular-scroll library for the actual scrolling process (feel free to substitute it with another library if desired).

https://gist.github.com/mdvorak/fc8b531d3e082f3fdaa9
Please note: This solution does not directly enhance the smooth scrolling behavior of $anchorScroll but rather replaces its scroll handler.

To implement this feature, simply include the mdvorakSmoothScroll module in your application.

Thank you, Alan! For those interested, I've applied the formatting according to John Pappa's standards.

(function() {

'use strict';
var moduleId = 'common';
var serviceId = 'anchorSmoothScroll';

angular
    .module(moduleId)
    .service(serviceId, anchorSmoothScroll);

anchorSmoothScroll.$inject = ['$document', '$window'];

function anchorSmoothScroll($document, $window) {

    var doc = $document[0];
    var win = $window;

    var service = {
        scrollDown: scrollDown,
        scrollUp: scrollUp,
        scrollTo: scrollTo,
        scrollToTop: scrollToTop
    };
    return service;

    function getCurrentPagePosition(currentWin, document) {
        // Handling page position for various browsers
        if (currentWin.pageYOffset) return currentWin.pageYOffset;
        if (document.documentElement && document.documentElement.scrollTop)
            return document.documentElement.scrollTop;
        if (document.body.scrollTop) return document.body.scrollTop;
        return 0;
    }

    function getElementY(document, element) {
        var y = element.offsetTop;
        var node = element;
        while (node.offsetParent && node.offsetParent !== document.body) {
            node = node.offsetParent;
            y += node.offsetTop;
        }
        return y;
    }

    function scrollDown(startY, stopY, speed, distance) {

        var timer = 0;
        var step = Math.round(distance / 25);
        var leapY = startY + step;

        for (var i = startY; i < stopY; i += step) {
            setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
            leapY += step;
            if (leapY > stopY) leapY = stopY;
            timer++;
        }
    };

    function scrollUp(startY, stopY, speed, distance) {

        var timer = 0;
        var step = Math.round(distance / 25);
        var leapY = startY - step;

        for (var i = startY; i > stopY; i -= step) {
            setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
            leapY -= step;
            if (leapY < stopY) leapY = stopY;
            timer++;
        }
    };

    function scrollToTop(stopY) {
        scrollTo(0, stopY);
    };

    function scrollTo(elementId, speed) {

        var element = doc.getElementById(elementId);

        if (element) {
            var startY = getCurrentPagePosition(win, doc);
            var stopY = getElementY(doc, element);
            var distance = stopY > startY ? stopY - startY : startY - stopY;

            if (distance < 100) {
                this.scrollToTop(stopY);
            } else {
                var defaultSpeed = Math.round(distance / 100);
                speed = speed || (defaultSpeed > 20 ? 20 : defaultSpeed);

                if (stopY > startY) {
                    this.scrollDown(startY, stopY, speed, distance);
                } else {
                    this.scrollUp(startY, stopY, speed, distance);
                }
            }
        }
    };

};

})();

I don't have much experience with animating $anchorScroll. This is how I typically handle it in my projects:

/* To scroll to the top on each ui-router state change */
$rootScope.$on('$stateChangeStart', function() {
 scrollToTop();
});

Here's the JavaScript function:

function scrollToTop() {
    if (typeof jQuery == 'undefined') {
        return window.scrollTo(0,0);
    } else {
        var body = $('html, body');
        body.animate({scrollTop:0}, '600', 'swing');
    }
    log("scrollToTop");
    return true;
}

By incorporating JQuery and Javascript within a Directive, it becomes possible to achieve the functionality of scrolling to a particular div upon clicking an anchor tag.

To see this in action, be sure to visit the following link: