duScroll does not work correctly AngularJS

Question

duScroll does not work correctly AngularJS

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I'm using a tool that offers us an angle that is Angular-scroll where I have a function that executes a scroll up, but I have not tried to get it, please some solution?

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

javascript html angularjs

asked by zerokira 26.09.2017 в 15:05

source

2 answers

0

Since it seems that the duScrollTop() function has a bug you can use the duScrollTo() function

I'll give you an example:

<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 ng-controller="MyCtrl">
  <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.duScrollTo();
    };

  }]);
</script>
</body>
</html>

answered by 26.09.2017 в 15:44

Access a data inside a json object (no array) Doubt about the syntax of dependency injection

score 2 · Accepted Answer

The duScrollTop function has a bug and apparently has not been fixed . Use the scrollToElement method sending the item to where you want the scroll, the padding, and the duration in milliseconds:

<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 ng-controller="MyCtrl">
  <div id='example' 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() {
      var example = angular.element(document.getElementById('example'));
      
      $document.scrollToElement(example,0, 2000);
    };

  }]);
</script>
</body>
</html>