Scroll to top of div in AngularJS?

angularjs, css, html, javascript, jquery

Solution

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

Problem

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

Original source