Question

100

AngularJS - $anchorScroll smooth/duration

rated 0 times [ 104] [ 4] / answers: 1 / hits: 99386 / 11 Years ago, thu, february 13, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

patienceannel

Add To Favorites

Follow

Total Points: 674

Total Questions: 101

Total Answers: 101

Location: Northern Mariana Islands

Member since Fri, Jan 15, 2021

3 Years ago

patienceannel questions

1 React Functional Component: how to use componentDidMount()

Fri, Mar 11, 22, 00:00, 2 Years ago

1 Map of Maps in Typescript / ECMAScript

Tue, Oct 20, 20, 00:00, 4 Years ago

1 Using moment.js to determine if current time (in hour) is between certain hours

Fri, May 29, 20, 00:00, 4 Years ago

1 How to display success message after copying url to clipboard?

Wed, Apr 8, 20, 00:00, 4 Years ago

1 Refactor aliased @ imports to relative paths

Wed, Jul 24, 19, 00:00, 5 Years ago

View All

answered 11 Years ago valentinam · Accepted Answer

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