AngularJS, how to return to the top of the page during pagination?

V

Vyacheslav Popov2015-02-15 12:05:49

Angular

Vyacheslav Popov, 2015-02-15 12:05:49

Structure

<body>
    <header>...</header>

    <ng-view></ng-view>

    <footer></footer>
</body>

pages with pagination is in ng-view
when scrolling, at the bottom of this page

there is pagination

when switching to pagination on sheet 2, the view position from the top of the page (top) does not change. I need to return to the top - by scrolling, by myself.
How to automatically return to the top when you go to another page in pagination? THANK YOU

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Arthur, 2015-02-15
Mudrick @mudrick

In the main controller itself, listen for page URL changes and scroll to the top:

$rootScope.$on('$routeChangeSuccess', function(e, current, previous) {
    window.scrollTo(0, 0);
});

UPD:
If you want to make pagination on a site like mysite.ru/1, then in your routes you should have something like this:

$routeProvider
     .when('/:pageNumber?', {
          templateUrl: 'partials/home.html',
          controller: 'HomeCtrl'
     })

In the controller, attach $routeParams to read the variables from the route, and also attach the paginationService , it has a setCurrentPage method that sets the current page:

watchesStore.controller('WatchesStoreController', function($routeParams, paginationService) {
    var pageNumber = $routeParams.pageNumber || 1;
        pageNumber = parseInt(page, 10);

    var paginationId = 'watchesStore'; // setCurrentPage требует instanceId — айдишку экземпляра пагинатора, чтобы знать, какой блок, собственно, пагинировать

    paginationService.setCurrentPage(paginationId, pageNumber);
});

And in the HTML code, you also need to insert the ID of the pagination instance (we called it watchesStore ) into the directive:
UPD2:
Oh, I just noticed that you already have a route for the watch ID:

$routeProvider
    .when('/:watchId', {
        templateUrl: 'partials/watch-detail.html',
        controller: 'WatchDetailCtrl'
    })

So, for pagination, use not mysite.ru/1 , but the usual GET parameters mysite.ru/?page=1 . As a result, in the controller you will receive the page like this:

watchesStore.controller('WatchesStoreController', function($location, paginationService) {
    var params = $location.search();

    var pageNumber = params.page || 1;
        pageNumber = parseInt(page, 10);

    ...
});

M

Mikhail Osher, 2015-02-15
@miraage

As far as I remember, there is such a construction:
DOCS
<ng-view autoscroll></ng-view>

V

Vyacheslav Popov, 2015-02-15
@VyacheslavPopov

I use this schema

watchesStore.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    })
    $routeProvider.
      when('/', {
        templateUrl: 'partials/home.html',
        controller: 'HomeCtrl'
      }).
      when('/service', {
        templateUrl: 'partials/service.html',
        controller: 'ServiceCtrl'
      }).
      when('/contacts', {
        templateUrl: 'partials/contacts.html',
        controller: 'ContactsCtrl'
      }).
      when('/:watchId', {
        templateUrl: 'partials/watch-detail.html',
        controller: 'WatchDetailCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }
]);