duScrollTop не работает

У меня есть следующий код, но прокрутка не работает.

<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() не работает для меня

Источник

1 ответ

Решение

1) Вы $scope.scrollToTop метод объявлен в MyCtrlтак что вы должны использовать ngController директива, чтобы разрешить использование этого метода с ngClick;

2) Просто звонюscrollTop() вернет текущую позицию прокрутки; чтобы прокрутить до указанной позиции, вы должны передать аргументы этому методу:

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

Источник
Другие вопросы по тегам