AngularJS - $anchorScroll smooth/duration

anchor-scroll, angularjs, javascript, scroll

Solution

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

Problem

Reading the AngularJS docs I haven't figured out if `$anchorScroll` can have a duration/easing option to smooth scroll to elements. It only says: ``` $location.hash('bottom'); // call $anchorScroll() $anchorScroll(); ``` I do not use jquery and don't want to; is there still a clever yet simple way to make or extend `$anchorScroll` in order to make scrolling more smooth?

Original source

Related problems