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

Question

我正在使用 AngularJS 1.3.11 和 AngularUI Bootstrap 0.12.0 开发一个 SPA 具有以下分页，效果很好，符合预期。

<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 、 section 或...您可以使用此使用 animate 进入元素顶部的指令。

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

}]);

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

How can I scroll to the top on page change using AngularUI Bootstrap's pagination?

angularjs

angular-ui-bootstrap