Scroll to in angularjs

Question

I am trying to scroll to an element on the page after I \'show\' it. I.E. i have a very long list of users and I display them as a list. Each element has an edit icon you can

Answer 1

you posted a question about this on my blog as well in the comments.

Without looking at all of your code, I can only guess at this, but I can tell you a few things that might help:

1. you can't scroll to a hidden element.
2. The actual scrolling is done by a $watch that is setup by $anchorScroll which is processed during the $digest.
3. Whatever you're setting up to show/hide that form element is also being processed in a $watch at $digest.

So it looks like to me that it's trying to process the scroll before it processes the value to show the form. To fix this I'd try either refactoring the code you're using to show the form, or wrapping your $anchorScroll call in a $timeout to ensure it's excuted after the show's watch.

I hope that helps.

Answer 2

I found that if I wanted to scroll to a particular element, I wasn't interested in updating the url to show what Id I was going to (e.g. #admin-form id in www.something.com/#admin-form)

So to scroll without updating the url I found you could just call anchorscroll without needing to update the location hash.

$anchorScroll('admin-form');

Answer 3

Angulars routing seems to pick up the change, which in my case is bad because the scrollTo reroutes me to back to the main admin page.

Scrolling and then resetting the $location.hash() so angular does not perceive a change in url seems to work.

 $scope.scrollTo = function (id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    $location.hash(old);
  }

Edit:

As mentioned in a comment by @theunexpected1, since 1.4.0, Angular's $anchorScroll allows you to directly pass the id as a parameter without the need to update the url with the hash:

$scope.scrollTo = function(id) {

  // Pass the 'id' as the parameter here, the page will scroll 
  // to the correct place and the URL will remain intact.
  $anchorScroll(id);
}

Answer 4

For future reference - and anyone who came here with the same problem about scrolling but is not using ng-routes to scroll, @Ben_Lesh's answer is actually quite insightful.

I was using

$location.hash(id)
$anchorScroll()

to scroll, but also running into the same problem regarding first-time click not working. I realized that the problem was that my first click set the object visible, and then tried to scroll to it, but at the time of scroll, the element was still not visible on the page. Then at the end of the cycle, the page re-renders.

The second time I click, the element is now set to visible, so the scrolling works fine.

The solution is, after you set the boolean that makes your element visible, to call an

$timeout(function() {$scope.$apply()},0)

then call your scroll function. This way you force the re-render before the scroll. Voila!

Answer 5

I've created a plunk to show off this problem. Notice how you have to click the button twice for the message to appear?

http://plnkr.co/edit/oU3REYC2upvlPMc5ipBp?p=preview