8

I'm trying to use AngularJS $anchorScroll with $location.hash. However, when I set the hash, AngularJS adds a forward slash, / after it.

For example, the url is: http://localhost:13060/Dashboard. When I don't include the AngularJS library, I can click the link, #contact, and go to http://localhost:13060/Dashboard#contact.

But when I include AngularJS and click the link, it goes to http://localhost:13060/Dashboard#/contact preventing $anchorScroll from working.

Edit $anchorScroll not working

The starting URL is http://localhost:13060/Category. When I add a category, it should go to http://localhost:13060/Category#/#id (where id is the new id) and scroll down the page to it. The URL is correctly updating but $anchorScroll is not scrolling.

 //jump to new category
 $location.path("");
 $location.hash(cat.ID);
 $anchorScroll();
scniro
  • 16,844
  • 8
  • 62
  • 106
jth_92
  • 1,120
  • 9
  • 23

1 Answers1

6

Unless you use html5mode, which removes the hash from angular routing, you will have 2 hashes, one for angular routing and other for anchors.

http://localhost:13060/Dashboard#/#contact

Assuming you had a route path set as /profiles and anchor was in that view the url would look like:

http://localhost:13060/Dashboard#/profiles#contact

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • I have the URL correctly formatted now, but $anchorScroll() isn't scrolling down to the page. – jth_92 Jul 06 '14 at 00:14
  • I'll be honest, i've never used anchorscroll. Does `$location.hash()` output what you would expect ( the second hash) ? – charlietfl Jul 06 '14 at 00:23
  • Yes, it updates the hash correctly (when I specify the path), but then nothing happens other than the URL browser bar reflecting the change. – jth_92 Jul 06 '14 at 00:27
  • I discovered the issue. I have the $anchorScroll in the result of the promise (i.e. categories.then) and I change the $scope. I was invoking the hash function before the $scope change propagated to the view and thus the hash wasn't there so it wouldn't scroll. I added a timeout to the $anchorScroll which fixed it. – jth_92 Jul 06 '14 at 00:35
  • @jth_92 would be nice to see a jsfiddle or something, I have the same problem but I don't see how exactly / where you have added the $location.path(""); $location.hash(cat.ID); – obeliksz Nov 03 '17 at 20:30