如何在带有虚拟页面项的AngularJS应用程序中将页面平滑滚动到顶部？

Question

我正在使用Bootstrap 4和 AngularJS v1.6.6 制作一个小的 Contacts应用程序。

应用程序仅显示 Users JSON。由于JSON返回了大量用户，因此该应用程序还具有分页功能。

// Create an Angular module named "contactsApp"
var app = angular.module("contactsApp", []);

// Create controller for the "contactsApp" module
app.controller("contactsCtrl", ["$scope", "$http", "$filter", function($scope, $http, $filter) {
  var url = "https://randomuser.me/api/?&results=100&inc=name,location,email,cell,picture";
  $scope.contactList = [];
  $scope.search = "";
  $scope.filterList = function() {
    var oldList = $scope.contactList || [];
    $scope.contactList = $filter('filter')($scope.contacts, $scope.search);
    if (oldList.length != $scope.contactList.length) {
      $scope.pageNum = 1;
      $scope.startAt = 0;
    };
    $scope.itemsCount = $scope.contactList.length;
    $scope.pageMax = Math.ceil($scope.itemsCount / $scope.perPage);
  };

  $http.get(url)
    .then(function(data) {
      // contacts arary
      $scope.contacts = data.data.results;
      $scope.filterList();

      // Paginate
      $scope.pageNum = 1;
      $scope.perPage = 24;
      $scope.startAt = 0;
      $scope.filterList();

      $scope.currentPage = function(index) {
        $scope.pageNum = index + 1;
        $scope.startAt = index * $scope.perPage;
      };

      $scope.prevPage = function() {
        if ($scope.pageNum > 1) {
          $scope.pageNum = $scope.pageNum - 1;
          $scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
        }
      };

      $scope.nextPage = function() {
        if ($scope.pageNum < $scope.pageMax) {
          $scope.pageNum = $scope.pageNum + 1;
          $scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
        }
      };

    });
}]);

$('.pagination li a').on('click', function() {
  $("html, body").animate({
    scrollTop: 0
  }, 500);
  return false;
});

.site-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 1200px;
}

.grid {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}

.grid [class*='col-'] {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.grid .item {
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.grid .text {
  padding: 15px 8px;
}

.grid a {
  text-decoration: none;
  word-wrap: break-word;
}

.grid .card-title {
  margin-bottom: 10px;
  line-height: 1.25;
  font-size: 1.2rem;
}

.grid .read-more {
  padding: 0 8px 8px 8px;
  margin-top: auto;
}

.grid .text-muted {
  margin-bottom: 0;
}

.grid .thumbnail {
  padding: 15px;
}

.grid .thumbnail img {
  display: block;
  margin: 0 auto;
  height: auto;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>


<div data-ng-app="contactsApp">
  <div class="container" data-ng-controller="contactsCtrl">
    <div class="grid" ng-if="contactList.length > 0">
      <div data-ng-repeat="contact in contactList | limitTo : perPage : startAt" class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
        <div class="item">
          <div class="thumbnail"><img ng-src="{{contact.picture.large}}" class="rounded-circle"></div>
          <div class="text">
            <h2 class="card-title text-center">
              {{contact.name.first }} {{contact.name.last }}
            </h2>
            <ul class="list-unstyled mb-0 text-center">
              <li class="text-muted">Lives in {{contact.location.city}}</li>
              <li><a href="mailto:{{contact.email | lowercase}}">{{contact.email | lowercase}}</a></li>
            </ul>
          </div>
          <div class="read-more">
            <a class="btn btn-block btn-sm btn-primary" href="tel:{{contact.cell}}"><i class="fa fa-lg fa-phone-square" aria-hidden="true"></i><span class="pl-2">Call</span></a>
          </div>
        </div>
      </div>
    </div>
    <p ng-if="contactList.length <= 0" class="text-center">There are no contacts</p>
    <div ng-if="pageMax > 1">
      <ul class="pagination pagination-sm justify-content-center">
        <li class="page-item"><a href="#" class="page-link" ng-click="prevPage()"><i class="fa fa-chevron-left"></i></a></li>
        <li ng-repeat="n in [].constructor(pageMax) track by $index" ng-class="{true: 'active'}[$index == pageNum - 1]">
          <a href="#" class="page-link" ng-click="currentPage($index)">{{$index+1}}</a>
        </li>
        <li><a href="#" class="page-link" ng-click="nextPage()"><i class="fa fa-chevron-right"></i></a></li>
      </ul>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

问题化地创建分页项目，在控制器内部，一小段jQuery代码旨在单击该项目时平滑地滚动页面至顶部 不有效。

什么是可行的选择？

Answer 1

// Create an Angular module named "contactsApp"
var app = angular.module("contactsApp", []);

// Create controller for the "contactsApp" module
app.controller("contactsCtrl", ["$scope", "$http", "$filter", "$timeout", function($scope, $http, $filter, $timeout) {
  var url = "https://randomuser.me/api/?&results=100&inc=name,location,email,cell,picture";
  $scope.contactList = [];
  $scope.search = "";
  $scope.filterList = function() {
    var oldList = $scope.contactList || [];
    $scope.contactList = $filter('filter')($scope.contacts, $scope.search);
    if (oldList.length != $scope.contactList.length) {
      $scope.pageNum = 1;
      $scope.startAt = 0;
    };
    $scope.itemsCount = $scope.contactList.length;
    $scope.pageMax = Math.ceil($scope.itemsCount / $scope.perPage);
  };

  $http.get(url)
    .then(function(data) {
      // contacts arary
      $scope.contacts = data.data.results;
      $scope.filterList();

      // Paginate
      $scope.pageNum = 1;
      $scope.perPage = 24;
      $scope.startAt = 0;
      $scope.filterList();

      $scope.currentPage = function(index) {
        $("html, body").animate({
            scrollTop: 0
        }, 300);
        $timeout( function(){
            $scope.pageNum = index + 1;
            $scope.startAt = index * $scope.perPage;
        },0);
      };

      $scope.prevPage = function() {
        if ($scope.pageNum > 1) {
          $scope.pageNum = $scope.pageNum - 1;
          $scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
        }
      };

      $scope.nextPage = function() {
        if ($scope.pageNum < $scope.pageMax) {
          $scope.pageNum = $scope.pageNum + 1;
          $scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
        }
      };
    });
}]);

$('.pagination li a').on('click', function() {
  $("html, body").animate({
    scrollTop: 0
  }, 500);
  return false;
});

.site-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 1200px;
}

.grid {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}

.grid [class*='col-'] {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.grid .item {
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.grid .text {
  padding: 15px 8px;
}

.grid a {
  text-decoration: none;
  word-wrap: break-word;
}

.grid .card-title {
  margin-bottom: 10px;
  line-height: 1.25;
  font-size: 1.2rem;
}

.grid .read-more {
  padding: 0 8px 8px 8px;
  margin-top: auto;
}

.grid .text-muted {
  margin-bottom: 0;
}

.grid .thumbnail {
  padding: 15px;
}

.grid .thumbnail img {
  display: block;
  margin: 0 auto;
  height: auto;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>

<div data-ng-app="contactsApp">
  <div class="container" data-ng-controller="contactsCtrl">
    <div class="grid" ng-if="contactList.length > 0">
      <div data-ng-repeat="contact in contactList | limitTo : perPage : startAt" class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
        <div class="item">
          <div class="thumbnail"><img ng-src="{{contact.picture.large}}" class="rounded-circle"></div>
          <div class="text">
            <h2 class="card-title text-center">
              {{contact.name.first }} {{contact.name.last }}
            </h2>
            <ul class="list-unstyled mb-0 text-center">
              <li class="text-muted">Lives in {{contact.location.city}}</li>
              <li><a href="mailto:{{contact.email | lowercase}}">{{contact.email | lowercase}}</a></li>
            </ul>
          </div>
          <div class="read-more">
            <a class="btn btn-block btn-sm btn-primary" href="tel:{{contact.cell}}"><i class="fa fa-lg fa-phone-square" aria-hidden="true"></i><span class="pl-2">Call</span></a>
          </div>
        </div>
      </div>
    </div>
    <p ng-if="contactList.length < 1" class="text-center">There are no contacts</p>
    <div ng-if="pageMax > 1">
      <ul class="pagination pagination-sm justify-content-center">
        <li class="page-item"><a href="#" class="page-link" ng-click="prevPage()"><i class="fa fa-chevron-left"></i></a></li>
        <li ng-repeat="n in [].constructor(pageMax) track by $index" ng-class="{true: 'active'}[$index == pageNum - 1]">
          <a href="#" class="page-link" ng-click="currentPage($index)">{{$index+1}}</a>
        </li>
        <li><a href="#" class="page-link" ng-click="nextPage()"><i class="fa fa-chevron-right"></i></a></li>
      </ul>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>