Scroll to top of div in AngularJS?

All we need is an easy explanation of the problem, so here it is.

I am using AngularJS for a small web app and have encountered a problem. I am using ng-repeat to populate a list inside of a div. The div has a fixed height and is set to overflow-y: auto, meaning a scroll bar appears when the list is too big for the div. My problem is that when the list gets re-drawn, i.e. the data backing ng-repeat changes, the scroll bar does not reset to the top of the div. Instead, it stays at whatever position the scroll bar was at before the ng-repeat change. This is a very poor user experience. I’ve tried the following without any luck:

<div id="myList">
  <ul>
    <li ng-repeat="item in items">{{item}}</li>
  </ul>
</div>

<a ng-click="switchItems()">Switch</a>

<script>
function MyApp($scope) {
  $scope.switchItems = function() {
    $('#myList').scrollTop();
    $scope.items = [1, 2, 3, 4]; // new items
  };
}
</script>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I’ve had the same issue and I usually solve it with the following generic directive. It listens to a given event and whenever that event happens, it scrolls the element back to y = 0. All you need to do is $broadcast the event in your controller when your list changes.

angular.module("ui.scrollToTopWhen", [])
.directive("scrollToTopWhen", function ($timeout) {
  function link (scope, element, attrs) {
    scope.$on(attrs.scrollToTopWhen, function () {
      $timeout(function () {
        angular.element(element)[0].scrollTop = 0;
      });
    });
  }
});

Usage:

// Controller
$scope.items = [...];
$scope.$broadcast("items_changed")

// Template
<div id="myList" scroll-to-top-when="items_changed">

Method 2

I would simply add a directive that watches the content of the DIV. It would then scroll to the top whenever the content changes! This solution does not require event processing (which I believe is unnecessary here).

mod.directive('scrollToTop', function(){
    return {
        restrict: 'A',
        link: function postLink(scope, elem, attrs) {
            scope.$watch(attrs.scrollToTop, function() {
                elem[0].scrollTop = 0;
            });
        }
    };
});

The html markup would then use the directive to trigger the scrolling thus:

<div class='myList' data-scroll-to-top='data.items.length'>
  <ul>
    <li data-ng-repeat='item in data.items'>{{item}}</li>
  </ul>
</div>

As you add items to the list, the DIV will scroll to the top!
Here is a jsFiddle with working code:
http://jsfiddle.net/pkgbtw59/89/

Method 3

I have faced the same issue with table body scrolling.
I have resolved it in following way.

Here is my sample html.

<table id="rateplanmapping-scroll">
    <thead>
       <th></th>....
    </thead>
    <tbody >
        <tr ng-repeat="data in datas"> //this is the data
            <td></td>.....
        </tr>
    </tbody>
</table>

Here is the angular code to scroll to the top

<script>

  angular.element("#rateplanmapping-scroll tbody")[0].scrollTop=0; 

</script>

I hope it helps.
You can put this script in required function,
so when particular things happen it get triggered automatically. Or
can be attached to event also.

For div element this can be done in following way

http://plnkr.co/edit/0B4zrFTho6GYuPAS0S1A?p=preview

Thanks.

Method 4

You can also use $anchorScroll as per the docs

// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');

// call $anchorScroll()
$anchorScroll();

You would need to wrap this within a $timeout:

$timeout(function() {
  $location.hash('myList');
  $anchorScroll();
})

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply