Retain scroll position on route change in AngularJS?

by

I have a fiddle here that shows how to restore scroll position in the list view after a detail view; not encapsulated in a directive yet, working on that…

http://jsfiddle.net/BkXyQ/6/

$scope.scrollPos = {}; // scroll position of each view

$(window).on('scroll', function() {
    if ($scope.okSaveScroll) { // false between $routeChangeStart and $routeChangeSuccess
        $scope.scrollPos[$location.path()] = $(window).scrollTop();
        //console.log($scope.scrollPos);
    }
});

$scope.scrollClear = function(path) {
    $scope.scrollPos[path] = 0;
}

$scope.$on('$routeChangeStart', function() {
    $scope.okSaveScroll = false;
});

$scope.$on('$routeChangeSuccess', function() {
    $timeout(function() { // wait for DOM, then restore scroll position
        $(window).scrollTop($scope.scrollPos[$location.path()] ? $scope.scrollPos[$location.path()] : 0);
        $scope.okSaveScroll = true;
    }, 0);
});

The fiddle also shows fetching the list once, outside of ‘ListCtrl’.

More Related Contents:

  1. Delaying AngularJS route change until model loaded to prevent flicker
  2. AngularJS : Initialize service with asynchronous data
  3. Way to ng-repeat defined number of times instead of repeating over array?
  4. What is the difference between angular-route and angular-ui-router?
  5. Call AngularJS from legacy code
  6. Migrating AngularJS to Angular 4,5 (with DEMO) [closed]
  7. AngularJS sorting by property
  8. Angularjs – ng-cloak/ng-show elements blink
  9. How to add many functions in ONE ng-click?
  10. How to trigger ngClick programmatically
  11. How to reload or re-render the entire page using AngularJS
  12. Ng-model does not update controller value
  13. Angularjs “Controller as” or “$scope”
  14. How to set the id attribute of a HTML element dynamically with angularjs (1.x)?
  15. How to filter by object property in angularJS
  16. password-check directive in angularjs
  17. AngularJS – Image “onload” event
  18. Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular)
  19. What is the elegant way to get the latest date from array of objects in client side?
  20. AngularJS Directives: Change $scope not reflected in UI
  21. Angular.js. How to count ng-repeat iterations which satisfy the custom filter
  22. CORS: credentials mode is ‘include’
  23. Angularjs does not load scripts within ng-view
  24. Print a div using javascript in angularJS single page application
  25. Directive is being rendered before promise is resolved
  26. Using Express Handlebars and Angular JS
  27. How to change colours for Angular-Chart.js
  28. Genuinely stop a element from binding – unbind an element – AngularJS
  29. Clear localStorage on tab/browser close but not on refresh
  30. Angular controller scope not updating after jQuery ajax call

Leave a Comment