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.

do you want the scroll position to be at the top of the new page when navigating to it? — Guillaume, Oct 21 '15 at 12:42
Yes, it works like this except when I pressed the back button right before getting to a new page(without scrolling after return), in this case the scroll position won't be at the top, no matter how many times I try to go to another page, only when I scroll it(even just a pixel down/up) after the next transition it returns to the top. — renchan, Oct 21 '15 at 13:26
Have you tried to reset the scroll manually? `$(document).ready(function(){ window.scrollTo(0, 0); }); ` — anmarti, Oct 21 '15 at 13:34
Can you post a example of jsfiddle of your issue? Have you tried doing what @anmarti suggests each time the controller initiates? — jjbskir, Oct 21 '15 at 14:20
@anmarti Sorry, for a late reply. I tried, but it's not helping too... — renchan, Oct 22 '15 at 11:52
I don't understand the sentence "it returns you to the list page loading you scroll position". Could you improve this part of your question, please? — www.admiraalit.nl, Oct 28 '15 at 09:35

score 2 · Accepted Answer · answered Oct 21 '15 at 13:46

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

score 0 · Answer 2 · answered Oct 21 '15 at 15:19

You can catch reload events by firing functions in the initiation of your controller, provided these controllers are wrapped in an Immediately Invoked Function Expression. Like so:

(function() {


 angular.module("pstat")
         .controller("homeCtrl", homeCtrl);

  homeCtrl.$inject = ['$log', 'dataService', 'localStorageService', '$http'];
  function homeCtrl ($log, dataService, localStorageService, $http) {
    var vm = this;
    $(document).getElementById("yourId").scrollTop(0);

  });
})()

This will force the page to have 0 vertical scroll offset when the controller is initialized, I.E on the $window.history.back event landing on this page.

score -1 · Answer 3 · answered Oct 28 '15 at 10:10

This what I have added to the famous phonecatApp from the AngularJS tutorial and it works:

    phonecatApp.run(function($rootScope, $window) {
        $rootScope.$on('$viewContentLoaded', function(){
            $(document).ready(function(){ window.scrollTo(0, 0); });
        });
    });

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

3 Answers3