1

Estoy haciendo uso de un herramienta que nos ofrece angular que es Angular-scroll donde tengo una función que ejecuta un scroll hacia arriba, pero no he tratado de conseguirlo, por favor alguna solución?

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

3
  • El error unhandle rejection hay forma de que puedas mostrar un ejemplo emulando el error? No puedo reproducirlo.
    – Einer
    el 26 sep. 2017 a las 13:47
  • @Einer lo intentare reproducir editando mi pregunta !! dame momento,
    – zerokira
    el 26 sep. 2017 a las 13:51
  • @Einer aun no intento reproducirlo, el error solo me sale en mi proyecto...Algo estoy haciendo mal, estuve haciendo varios ejemplos y funciona correctamente no se que estoy haciendo de diferente, estaré comentando si algo...
    – zerokira
    el 26 sep. 2017 a las 15:08

2 respuestas 2

2

La funcion duScrollTop tiene un bug y al parecer no se ha corregido. Utiliza el metodo scrollToElement enviandole el elemento de hasta donde quieres el scroll, el padding, y la duracion en milisegundos:

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

6
  • Ok @Einer con solo decirme que tiene un bug me basta jeje gracias.
    – zerokira
    el 26 sep. 2017 a las 13:17
  • Recuerda aceptarla si era la respuesta que buscabas.
    – Einer
    el 26 sep. 2017 a las 13:33
  • Me esta ocurriendo un error, trato de solucionarlo.
    – zerokira
    el 26 sep. 2017 a las 13:33
  • Si es relacionado a la pregunta, puedes compartilo.
    – Einer
    el 26 sep. 2017 a las 13:34
  • Revisa una respuesta amigo donde explico el error que me sale.
    – zerokira
    el 26 sep. 2017 a las 13:40
0

Ya que parece que la función duScrollTop() tiene un bug puedes utilizar la función duScrollTo()

Te dejo un ejemplo:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.