Scroll position won't reset when go to other page after pressing back button

Question

I'm having a problem with scrolling in angularjs app.

At the moment it has 2 pages: The first page is a list of customers, you can select one of them and see it's details. The second one is a list of companies, it works in the same way.

I'm using a panel to navigate between them using $location.path(). And the app also has a back button, using $window.history.back().

When you select one of the items in customers or companies list, and after it, when you pressed the button back you're returned to the previous page(customers or companies list) with restoring the scroll position. I'm using standard $window.history.back() feature, not implemented anything custom.

But here is where the problem occurs: if without scrolling in any direction simply go to another page(to other list of items) scroll position won't reset. But if you scroll it even just a little bit, it's position will reset. Also if you don't use the back button everything works fine.

So, the question is: how can we reset scroll position when go to another page after using $window.history.back()?

I'm also using infinite-scroll plugin, if it matters. But even when I turned it off, nothing changed so I guess the problem is not with the plugin.

Answer 1

I had simlar issue while ago and come up with simple (but not elegant solution).

When view is changed I've store wrapper scrolltop value in the scope. When going back I applied that value one again on wrapper.

Actually I don't remember how it behave on click in back broswer button. You need to check that.

---

Changing view and store scrollTop value https://github.com/jedrzejchalubek/Reed/blob/master/src/app/controller/all.js#L20

angular.extend($scope.view, {
    panel: false,
    section: 'single',
    single: el,
    scrollPosition: $('#thumbs').scrollTop()
});

Going back and reapply scrollTop value https://github.com/jedrzejchalubek/Reed/blob/master/src/app/directives/back-to-list.js#L14

scope.$apply(function() {
    scope.view.section = 'list';
    scope.view.panel = false;
});
$('#thumbs').scrollTop( scope.view.scrollPosition );

Project is on github, so you can scan it. Maybe that helps. https://github.com/jedrzejchalubek/Reed