Question

我正在使用AngularJS 1.3.11开发SPA，AngularUI Bootstrap 0.12.0具有以下分页效果，并且符合预期。

<pagination total-items="incidentCount"
            items-per-page="limit"
            ng-model="currentPage"
            max-size="5"
            boundary-links="true"
            previous-text="&lsaquo;"
            next-text="&rsaquo;"
            first-text="&laquo;"
            last-text="&raquo;">
</pagination>

我希望在页面底部有这个分页，并在每次用户更改页面时滚动到顶部（通过选择页码或使用导航箭头）。

我该如何添加此功能？

Answer 1

您可以使用ng-change指令和write a method转到top位置。

<强> HTML

<a name="top"></a>
Para1
para2
...
...
...
para n

<pagination ng-change="pageChanged()"></pagination>

<强>控制器

$scope.pageChanged = function() {
   window.location.hash = '#top';
};

演示：http://plnkr.co/edit/eqa9o75wFliqjHddKEjY?p=preview

Answer 2

Asiks解决方案第一次运行。您需要将 $ location och $ anchorscroll 注入您的控制器。

<强> HTML

<pagination ng-change="pageChanged()"></pagination>

<强>控制器

$scope.pageChanged = function() {
    $location.hash('top');
    $anchorScroll();
};

Answer 3

如果您在可滚动元素中有一些元素，例如 div ，部分或......您可以使用此指令在动画中使用该元素。

<强> HTML：

<div class="scrollable" scroll-to-top="students">
    <ul>
        <li ng-repeat="student in students">{{student.name}}</li>
    </ul>
</div>

<强>式：

.scrollable {
   height: 400px;
   overflow-y: auto;
   overflow-x: hidden;
}

<强>指令：

angular.module('myApp').directive('scrollToTop', ['$log', function ($log) {
   return {
      scope: {
         scrollToTop: "="
      },
      link: function (scope, element) {
         scope.$watchCollection('scrollToTop', function () {
            $(element).animate({scrollTop: 0},500);
         });
      }
   };

}]);

如何使用Angular UI Bootstrap分页滚动到页面顶部更改？

3 个答案: