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

Asked 19/10, 2015 at 12:29 Answered 28/10, 2015 at 10:10

Solved javascript angularjs scroll infinite-scroll

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.

Riba answered 19/10, 2015 at 12:29 Comment(9)

Did you try <body autoscroll="true"> ? – Contradict 19/10, 2015 at 12:54

I have, it's doesn't help much... – Riba 19/10, 2015 at 13:10

do you want the scroll position to be at the top of the new page when navigating to it? – Precipitous 21/10, 2015 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. – Riba 21/10, 2015 at 13:26

have you tried using JQuery scrollTop() ? – Precipitous 21/10, 2015 at 13:33

Have you tried to reset the scroll manually? $(document).ready(function(){ window.scrollTo(0, 0); }); – Decuple 21/10, 2015 at 13:34

Can you post a example of jsfiddle of your issue? Have you tried doing what @Decuple suggests each time the controller initiates? – Pharyngitis 21/10, 2015 at 14:20

@Decuple Sorry, for a late reply. I tried, but it's not helping too... – Riba 22/10, 2015 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? – Gascon 28/10, 2015 at 9:35

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

Auditorium answered 21/10, 2015 at 13:46 Comment(0)

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.

Fable answered 21/10, 2015 at 15:19 Comment(0)

-1

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

Gascon answered 28/10, 2015 at 10:10 Comment(0)

Recommended topics

Hot tags