RELnemtzov RELnemtzov - 5 months ago 52
AngularJS Question

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

I am developing a SPA using AngularJS 1.3.11 and AngularUI Bootstrap 0.12.0 have the following pagination which works well and as expected.

<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 would like to have this pagination at the bottom of the page and scroll to the top every time the user changes pages (either by selecting a page number or using the navigation arrows).

How might I go about adding this functionality?

Answer

You can use ng-change directive and write a method to go to the top place.

HTML

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

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

Controller

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

Demo: http://plnkr.co/edit/eqa9o75wFliqjHddKEjY?p=preview

Comments