AngularJS Can't Use Hash to Jump to Anchor

Question

I've got a website set up using AngularJS and I don't need to use routing, so it isn't implemented. I want to be able to jump to a spot in the page based on an anchor, so I set up a link in my navbar that is:

<a href="/services#/myAnchor">Jump to anchor</a>

and I place farther down:

<a name="/myAnchor">

But it doesn't work, it has to be something to do with AngularJS, but since I'm not using routing I don't know what it is. I tried using just #myAnchor with no / but Angular seems to put that in when the page loads anyway, and doesn't work anyway.

Any ideas how to get just basic in page anchors to work again?

Answer 1

You are looking for $anchorScroll:

<div id="scrollArea" ng-controller="ScrollController">
  <a ng-click="gotoBottom()">Go to bottom</a>
  <a id="bottom"></a> You're at the bottom!
</div>


angular.module('anchorScrollExample', [])
  .controller('ScrollController', ['$scope', '$location', '$anchorScroll',
    function ($scope, $location, $anchorScroll) {
      $scope.gotoBottom = function() {
        // set the location.hash to the id of
        // the element you wish to scroll to.
        $location.hash('bottom');

        // call $anchorScroll()
        $anchorScroll();
      };
    }]);