CODEWITHSUNDEEP
javascriptangularjsscrollinfinite-scroll
renchan
renchan

Reputation: 519

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

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.

Upvotes: 19

Views: 2560

Answers (3)

www.admiraalit.nl
www.admiraalit.nl

Reputation: 6089

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); });
        });
    });

Upvotes: -1

awimley
awimley

Reputation: 712

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.

Upvotes: 0

Jędrzej Chałubek
Jędrzej Chałubek

Reputation: 1438

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

Upvotes: 2

Related Questions