duScrollTop 不工作

Question

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

<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>

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

Answer 1

1) 您的 $scope.scrollToTop 方法是在 MyCtrl 中声明的，因此您必须使用 ngController directive to allow using this method with ngClick;

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

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

Scrolls to specified position in either axis, with optional animation.

这是一个工作示例：

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 不工作

duScrollTop not working

angularjs

angularjs-material