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

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





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

Answer the question

In order to leave comments, you need to log in

3 answer(s)
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);

If you want to make pagination on a site like mysite.ru/1, then in your routes you should have something like this:
     .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:
Oh, I just noticed that you already have a route for the watch ID:
    .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);


Mikhail Osher, 2015-02-15

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

Vyacheslav Popov, 2015-02-15

I use this schema

watchesStore.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
      enabled: true,
      requireBase: false
      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'
        redirectTo: '/'

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question