Anchor links in Angularjs?

by

There are a few ways to do this it seems.

Option 1: Native Angular

Angular provides an $anchorScroll service, but the documentation is severely lacking and I’ve not been able to get it to work.

Check out http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html for some insight into $anchorScroll.

Option 2: Custom Directive / Native JavaScript

Another way I tested out was creating a custom directive and using el.scrollIntoView().
This works pretty decently by basically doing the following in your directive link function:

var el = document.getElementById(attrs.href);
el.scrollIntoView();

However, it seems a bit overblown to do both of these when the browser natively supports this, right?

Option 3: Angular Override / Native Browser

If you take a look at http://docs.angularjs.org/guide/dev_guide.services.$location and its HTML Link Rewriting section, you’ll see that links are not rewritten in the following:

Links that contain target element

Example: <a href="https://stackoverflow.com/ext/link?a=b" target="_self">link</a>

So, all you have to do is add the target attribute to your links, like so:

<a href="#anchorLinkID" target="_self">Go to inpage section</a>

Angular defaults to the browser and since its an anchor link and not a different base url, the browser scrolls to the correct location, as desired.

I went with option 3 because its best to rely on native browser functionality here, and saves us time and effort.

Gotta note that after a successful scroll and hash change, Angular does follow up and rewrite the hash to its custom style. However, the browser has already completed its business and you are good to go.

More Related Contents:

  1. AngularJS Multiple ng-app within a page
  2. How to call a method defined in an AngularJS directive?
  3. How to use a keypress event in AngularJS?
  4. How to Loop through items returned by a function with ng-repeat?
  5. What’s the difference between ng-model and ng-bind
  6. Angular js init ng-model from default values
  7. Easiest way to pass an AngularJS scope variable from directive to controller?
  8. How not to change url when show 404 error page with ui-router
  9. Implementing loading spinner using httpInterceptor and AngularJS 1.1.5
  10. How do I ignore the initial load when watching model changes in AngularJS?
  11. How to get element by classname or id
  12. Angular and UI-Router, how to set a dynamic templateUrl
  13. How do you get AngularJS to bind to the title attribute of an A tag?
  14. AngularJS not detecting Access-Control-Allow-Origin header?
  15. bootsrap nav-bar collapsable cannot make it work
  16. Setting dynamic scope variables in AngularJs – scope.
  17. How to create a localhost server to run an AngularJS project
  18. Angular filter works but causes “10 $digest iterations reached”
  19. How does Angular 2 change detection work?
  20. RegEx for no whitespace at the beginning and end
  21. How do I handle right-click events in angular.js?
  22. Can you change templateUrl on the fly?
  23. AngularJS – wait for multiple resource queries to complete
  24. angularjs move focus to next control on enter
  25. AngularJS $watch vs $watchCollection: which is better for performance?
  26. How to master AngularJS? [closed]
  27. Understanding the transclude option of directive definition?
  28. How to integrate AngularUI to AngularJS?
  29. how to pass querystring in angular routes?
  30. Two views in one AngularUI Router state sharing scope

Leave a Comment