Question

我有以下代码，但滚动不起作用。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-scroll/1.0.2/angular-scroll.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<body>
  <div style="width: 100%; height: 120vh;">EXAMPLE</div>
  
  <footer>
    <button ng-click="scrollToTop()">To the top!</button>
  </footer>
<script>
angular.module('myApp', ['duScroll']).
  controller('MyCtrl', ['$scope', '$document', function($scope, $document){

    $scope.scrollToTop = function() {
      $document.duScrollTop();
    };

  }]);
</script>
</body>
</html>

＆＃13;

方法duScrollTop()对我不起作用。

Answer 1

1）您在$scope.scrollToTop内声明了MyCtrl方法，因此您必须使用ngController directive来允许将此方法与ngClick一起使用;

2）只需致电scrollTop() will return current scroll position;要滚动到指定位置，您必须将参数传递给此方法：

.scrollTop|scrollLeft( top [, duration [, easing ] ] )

使用可选动画滚动到任一轴的指定位置。

这是一个有效的例子：

angular.module('myApp', ['duScroll']).
controller('MyCtrl', ['$scope', '$document', function($scope, $document){
  $scope.scrollToTop = function() {
    $document.duScrollTop(0);
  };
}]);

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="MyCtrl">
<body>
  <div style="width: 100%; height: 120vh;">EXAMPLE</div>
  <footer>
    <button ng-click="scrollToTop()">To the top!</button>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-scroll/1.0.2/angular-scroll.min.js"></script>
</body>
</html>

duScrollTop不工作

1 个答案: