Anchor links in Angularjs

Question

Is it possible to use anchor links with Angularjs   I e      lt a href   top  gt Top lt  a gt    lt a href   middle  gt Middle lt  a gt    lt a href   bottom  gt Bottom lt  a gt     lt div name  top  gt  lt  div gt         lt div name  middle  gt  lt  div gt         lt div name  bottom  gt  lt  div gt    Thank you

User · Answer

Works for me     lt a onclick  return false   href    class  collapsed  role  button  data-toggle  collapse  data-parent   accordion  ng-href   profile collapse   index    gt  blalba  lt  a gt

User · Answer

You need to only add  target  quot  self quot  to your link ex   lt a href  quot  services quot  target  quot  self quot  gt Services lt  a gt  lt div id  quot services quot  gt  lt  div gt

User · Answer

I don t know if that answers your question  but yes  you can use angularjs links  such as    lt a ng-href  http   www gravatar com avatar   hash     gt   There is a good example on the AngularJS website   http   docs angularjs org api ng directive ngHref  UPDATE  The AngularJS documentation was a bit obscure and it didn t provide a good solution for it  Sorry    You can find a better solution here  How to handle anchor hash linking in AngularJS

User · Answer

anchorScroll is indeed the answer to this  but there s a much better way to use it in more recent versions of Angular    Now   anchorScroll accepts the hash as an optional argument  so you don t have to change  location hash at all   documentation   This is the best solution because it doesn t affect the route at all  I couldn t get any of the other solutions to work because I m using ngRoute and the route would reload as soon as I set  location hash id   before  anchorScroll could do its magic   Here is how to use it    first  in the directive or controller    scope scrollTo   function  id       anchorScroll id         and then in the view    lt a href    ng-click  scrollTo id   gt Text lt  a gt    Also  if you need to account for a fixed navbar  or other UI   you can set the offset for  anchorScroll like this  in the main module s run function       run function   anchorScroll            this will make anchorScroll scroll to the div minus 50px        anchorScroll yOffset   50

User · Answer

You could try to use anchorScroll   Example  So the controller would be   app controller  MainCtrl   function  scope   location   anchorScroll   routeParams       scope scrollTo   function id          location hash id         anchorScroll              And the view    lt a href    ng-click  scrollTo  foo    gt Scroll to  foo lt  a gt       and no secret for the anchor id    lt div id  foo  gt    This is  foo  lt  div gt

User · Answer

I had the same problem  but this worked for me    lt a ng-href  javascript void 0   tagId  gt  lt  a gt

User · Answer

The best choice to me was to create a directive to do the work  because  location hash   and   anchorScroll   hijack the URL creating lots of problems to my SPA routing   MyModule directive  myAnchor   function       return       restrict   A       require    ngModel       link  function scope  elem  attrs  ngModel          return elem bind  click   function               other stuff             var el          el   document getElementById attrs  myAnchor             return el scrollIntoView

User · Answer

Or you could simply write   ng-href    yourAnchorId   Please notice the backslash in front of the hash symbol

User · Answer

If you are using SharePoint and angular then do it like below    lt a ng-href    item LinkTo Url    target   blank  ng-bind  item Title    gt  lt  a gt     where LinkTo and Title is SharePoint Column

User · Answer

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   lt a href   ext link a b  target   self  gt link lt  a gt    So  all you have to do is add the target attribute to your links  like so    lt a href   anchorLinkID  target   self  gt Go to inpage section lt  a gt    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

User · Answer

You can also Navigate to HTML id from inside controller   location hash  id in html

[angularjs] Anchor links in Angularjs?

Examples related to angularjs