AngularJS ui view autoscroll not working

Question

I'm using Angular's ui-router but having a problem where when I click on a new view, the page doesn't start at the top but where it was. I set autoscroll to true in my ui-view like what others suggested but it still isn't working. I'm not sure what the reason is for it not working.

<ui-view autoscroll="true" />

score 3 · Accepted Answer · answered Aug 30 '15 at 19:13

The default option is true, maybe there's something preventing the autoscroll from firing, we need more code. Also you can make a custom code that'll work. Something like this

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

score 1 · Answer 2 · edited May 23 '17 at 12:31

As you will see at this other SO Post '$routeChangeSuccess' will not work. You need to change the code to look like this:

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

Helpful UI-Router references (some gleaned from the referred-to SO Post):

State Change Events: https://github.com/angular-ui/ui-router/wiki#state-change-events
View Load Events: https://github.com/angular-ui/ui-router/wiki#view-load-events

AngularJS ui view autoscroll not working

2 Answers2