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 panies, 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 panies list, and after it, when you pressed the button back you're returned to the previous page(customers or panies 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.
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 panies, 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 panies list, and after it, when you pressed the button back you're returned to the previous page(customers or panies 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.
- Did you try <body autoscroll="true"> ? – Basar Sen Commented Oct 19, 2015 at 12:54
- I have, it's doesn't help much... – renchan Commented Oct 19, 2015 at 13:10
- do you want the scroll position to be at the top of the new page when navigating to it? – Guillaume Commented Oct 21, 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. – renchan Commented Oct 21, 2015 at 13:26
- 1 Can you post a example of jsfiddle of your issue? Have you tried doing what @anmarti suggests each time the controller initiates? – jjbskir Commented Oct 21, 2015 at 14:20
3 Answers
Reset to default 2 +25I had simlar issue while ago and e 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./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./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./jedrzejchalubek/Reed
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.
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); });
});
});