sbaaaang sbaaaang - 2 years ago 2393
Javascript Question

Angular js - $anchorScroll smooth/duration

Hi reading the Angular Js doc i have no idea if $anchorScroll can have a duration/easing option to smooth scroll to elements.

it only says:


// call $anchorScroll()

Since i do not use jquery and actually i don't want to, is there a clever, simple way to make or extend
for scrolling more smooth ?


Answer Source

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.


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download