7

I have a ui-view inside of my page. When some button is clicked, the ui-view is loaded and replaced by some HTML. I want the page to be scrolled down to the just-loaded part of the page.

Is this possible? Thanks in advance

Aleksandr M
  • 24,264
  • 12
  • 69
  • 143
John
  • 71
  • 1
  • 3
  • I think this is what you're looking for - http://stackoverflow.com/questions/14712223/how-to-handle-anchor-hash-linking-in-angularjs/14717011#14717011 – Ryan Connolly Oct 18 '13 at 02:45

2 Answers2

23

The ui-router module has been updated to scroll to the ui-view by default. You can add the autoscroll="false" attribute on <div ui-view> to prevent this. The default setting is true which scrolls to the ui-view upon state change.

I would think it should be the other way around where you have to set the autoscroll to enable rather than disable but this is the functionality of the updated ui-router.

You can read about it here.

In the linked Github issue, it says that the default value is autoscroll="expr" but I have found that expr does nothing and that the default value is autoscroll="true" (which makes more sense).

Tina
  • 1,186
  • 10
  • 11
  • Thanks for writing this. This new update has been driving me insane, as all my pages suddenly loaded scrolled down, and I couldn't figure out why. Thank you! – ac360 Feb 12 '14 at 18:29
2

On Route change it will scroll to the top of the page.

 $scope.$on('$routeChangeSuccess', function () {
      window.scrollTo(0, 0);
  });

put this code on your controller. (Change the value as per your requirements)

Praveen M P
  • 11,314
  • 7
  • 34
  • 41
  • 1
    I had to use `$stateChangeSuccess` but it worked well. Also used `$window` service for testability – Chic Sep 30 '15 at 18:13