0

Tengo configurado AngularJS con Ng Route. Al encontrarme por ejemplo en la pagina

craft/content/#!/

y quiero desplazarme a un div dentro de la misma página por ejemplo

<div id='caja'></div>

no puedo usar

craft/content/#!/#caja

ya que lo que hace es recargar la pagina, de que manera podria hacer un desplazamiento asi

2
  • 1
    Veo que la respuesta fue aceptada y dos dias mas tarde ya no, no te ha servido el ejemplo ??
    – j0se
    el 21 ago. 2017 a las 13:57
  • ya me quedó clara, lo que sucede es q el ejemplo me pareció un poco enredado por los ng-repeat, pero revisando más a fondo el link q dejaste de la documentación oficial quedó completamente claro, muchas gracias. el 24 ago. 2017 a las 5:54

1 respuesta 1

1

Te copio un ejemplo de la documentacion oficial, tienes que inyectar $anchorScroll

angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
  $anchorScroll.yOffset = 50;   // always scroll by 50 extra pixels
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
  function($anchorScroll, $location, $scope) {
    $scope.gotoAnchor = function(x) {
      var newHash = 'anchor' + x;
      if ($location.hash() !== newHash) {
        // set the $location.hash to `newHash` and
        // $anchorScroll will automatically scroll to it
        $location.hash('anchor' + x);
      } else {
        // call $anchorScroll() explicitly,
        // since $location.hash hasn't changed
        $anchorScroll();
      }
    };
  }
]);
body {
  padding-top: 50px;
}

.anchor {
  border: 2px dashed DarkOrchid;
  padding: 10px 10px 200px 10px;
}

.fixed-header {
  background-color: rgba(0, 0, 0, 0.2);
  height: 50px;
  position: fixed;
  top: 0; left: 0; right: 0;
}

.fixed-header > a {
  display: inline-block;
  margin: 5px 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="anchorScrollOffsetExample">

<div class="fixed-header" ng-controller="headerCtrl">
  <a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
    Go to anchor {{x}}
  </a>
</div>
<div id="anchor{{x}}" class="anchor" ng-repeat="x in [1,2,3,4,5]">
  Anchor {{x}} of 5
</div>
</div>

0

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.