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> 

I 페이지 하단이 매김을 상단에, 사용자가 페이지를 변경할 때마다 스크롤하려는 (어느 페이지 번호를 선택하거나 탐색 화살표를 사용하여).

어떻게이 기능을 추가 할 수 있습니까?

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 솔루션 단지 처음 작동합니다. 컨트롤러에 $ 위치 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); 
     }); 
     } 
    }; 

}]);