How to keep scroll position after refreshing in AngularJS

When you add some items to the beginning of ng-repeated collection (probably with unshift method), AngularJS would refresh the view and take your adorable scrollbar to the top of it. Sometimes it can be naughty behaviour to you. So I’ll show you how to fix this problem.


Here is an example. If you want to try it, please take a look at jsFiddle.

<html ng-app="app">
    <script src=""></script>
    <script src="app.js"></script>
  <body ng-controller="ItemsCtrl" keep-scroll-position>
    <a href="" ng-click="loadPreviousItems()" ng-if="!loaded">Load Previous Items</a>
    <div ng-repeat="item in items">
angular.module('app', [])

.controller('ItemsCtrl', function($scope) {
  $scope.items = [];

  for (var i=100; i < 200; i++) {
    $scope.items.push('item' + i);

  $scope.loadPreviousItems = function() {
    var previousItems = [];
    for (var i=0; i < 100; i++) {
      previousItems.push('item' + i);
    Array.prototype.unshift.apply($scope.items, previousItems);
    $scope.loaded = true;

.directive('keepScrollPosition', function() {
  return function(scope, el, attrs) {
      function() { return el[0].clientHeight; },
      function(newHeight, oldHeight) {
        console.debug('Height was changed', oldHeight, newHeight);
        el[0].scrollTop = newHeight - oldHeight;

It’s a quite simple solution, that is, just $watching scroll container’s height. The increase of height means that your collection items were added and all DOM have been manipulated by AnuglarJS. The rest is easy, All you need to do is take the scroll bar to where it was (newHeight - oldHeight).

I hope this could be of any help.



メールアドレスが公開されることはありません。 が付いている欄は必須項目です


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください