Scroll to top of div in AngularJS?

Question

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

Answer 1

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.

Answer 2

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">

Answer 3

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/

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