Changing route doesn't scroll to top in the new page

Question

I've found some undesired, at least for me, behaviour when the route changes. In step 11 of the tutorial http://angular.github.io/angular-phonecat/step-11/app/#/phones you can see the list of phones. If you scroll to the bottom and click on one of the latest, you can see that the scroll isn't at the top, instead is kind of in the middle.

I've found this in one of my apps too and I was wondering how can I get this to scroll to the top. I can do it manually, but I think that there should be another elegant way to do this which I don't know.

So, is there an elegant way to scroll to the top when the route changes?

Answer 1

Yes there is a way to scroll to the top when the route changes you can use the below-mentioned code for this:-

$rootScope.$on("$routeChangeSuccess",function(event, currentRoute, previousRoute) { 

window.scrollTo(0, 0); 

});