AngularJS - $anchorScroll smooth/duration

Question

Unfortunately this is not possible using $anchorScroll. As you discovered $anchorScroll doesn't have any options and doesn't work with $ngAnimate. In order to animate the scroll you would need to use your own service/factory or just straight javascript.

For the sake of self-learning I put together an example with a smooth scrolling service. There are probably better ways to do this so any feedback is encouraged.

To scroll to an element you attach a ng-click="gotoElement(ID)" to any element. I think an even better route would be to make this a directive.

Here's the working example on jsFiddle.

Update

There are now a number of third-party directives for accomplishing this.

• https://github.com/oblador/angular-scroll.
• https://github.com/d-oliveros/ngSmoothScroll
• https://github.com/arnaudbreton/angular-smoothscroll
• https://gist.github.com/justinmc/d72f38339e0c654437a2

You can also use the angular-scroll, link "https://github.com/durated/angular-scroll/". It is smooth scrolling also few easing functions to get a professional look.

The answer from Brett worked great for me. I did some small changes on his solution in terms of modularization and testability.

Here's is yet another working example on JsFiddle that includes the other version with testing included.

For testing, I'm using Karma and Jasmine. Signature has been slightly modified as follows:

 anchorSmoothScroll.scrollTo(elementId, speed);

Where element is a mandatory attribute to scroll to and speed is optional where the default is 20 (as it was before).

You can also use ngSmoothScroll, link: https://github.com/d-oliveros/ngSmoothScroll.

Just include the smoothScroll module as a dependency and use it like this:

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