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

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


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 valuehttps://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 valuehttps://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


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