滚动到AngularJS中的div顶部？

Question

我使用AngularJS作为一个小型Web应用程序并遇到了问题.我ng-repeat用来填充div里面的列表.div具有固定的高度并设置为overflow-y: auto,这意味着当列表对于div太大时会出现滚动条.我的问题是,当重新绘制列表时,即数据支持ng-repeat更改时,滚动条不会重置到div的顶部.相反,它在ng-repeat更改之前保持在滚动条所处的任何位置.这是一种非常糟糕的用户体验.我没有运气就试过以下事情:

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

Answer 1

我有同样的问题,我通常使用以下通用指令解决它.它侦听给定事件,每当事件发生时,它都会将元素向后滚动y = 0.您需要做的就是$broadcast当列表更改时控制器中的事件.

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

用法:

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

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

Answer 2

我只想补充一点,一个指令手表的DIV的内容.只要内容发生变化,它就会滚动到顶部!此解决方案不需要事件处理(我认为这是不必要的).

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

然后,html标记将使用该指令触发滚动:

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

当您向列表中添加项目时,DIV将滚动到顶部!这是一个带有工作代码的jsFiddle:http: //jsfiddle.net/pkgbtw59/89/

Answer 3

我在表格正文滚动时遇到了同样的问题。我已经通过以下方式解决了它。

这是我的示例 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>

这是滚动到顶部的角度代码

<script>

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

</script>

我希望它有帮助。
您可以将此脚本放在所需的函数中，因此当发生特定事件时，它会自动触发。或者也可以附加到事件。

对于 div 元素，这可以通过以下方式完成

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

谢谢。

Answer 4

您还可以根据文档使用 $anchorScroll

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

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

您需要将其包装在 $timeout 中：

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