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
    Commented 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. Commented 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 you have read our privacy policy.

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