For AngularJS web app: webpages don't remember their last scroll positions when navigating back to them with the back button. Why? How to fix?

Question

When navigating around the developer's guide for AngularJS, I noticed that I do not go back to my last scroll position when navigating back to a page using the back button. Instead, I go right back to the top. Since the developer's guide is built with AngularJS, I am afraid that, when I build my own web application with AngularJS, it will annoy my users if they have this same experience. Why is this happening, and how can it be fixed? Do I need to use HTML5's history API somehow?

Go to the developer's guide and see this behavior yourself: http://docs.angularjs.org/guide/directive

Answer 1

If you want to fix it, I can think of an idea of keeping the track of every route scroll position in a map (in service or on a rootScope) - when you are leaving the page ($routeChangeStart listener) just save the scroll position together with route path.

And when coming to any page, you can check if a record in a map exists for the route path and scroll window to desired position on $routeChangeSuccess event