Hash linking with routing - `$anchorScroll` troubleshooting

Question

Note: I still haven't solved this. This post seems to describe a solution to my problem since I'm using ngRoute and am on a newer version of Angular, but I couldn't make her solution work: https://stackoverflow.com/a/35028895/6647188

On my single page app: https://kylevassella.github.io/
I'm trying to link my nav buttons to hash links on a different view. I've been using the accepted answer here for help: How to handle anchor hash linking in AngularJS

But I'm having trouble implementing ($anchorScroll) on my site.

To see what I'm talking about:

1. My Plunker: https://plnkr.co/edit/fgTG7j?p=info Make the preview window wide enough so the nav menu ('Home Portfolio Contact') appears at the top.
   

2. Scroll down to ‘Projects’, click ‘Project 1’. This opens a new view & ng-show enables a different nav bar (which looks the same as the old. Look below <section ng-show="showPortfolioHeader"> in index.html for these nav anchors).
   

3. From here I want ‘Portfolio’ & ‘Contact’ to link to the #portfolio & #contact hash link ID's in my views/home.html view. But they only take me to the correct route (views/home.html), not to their respective scroll points on the page.
   NOTE: On Plunker, these don't even link to the correct route, they bring me to a 404. That's not the problem - on my local machine this part works fine. My problem is that once I get to the views/home.html view, the browser isn't scrolling to the hash link.
   

Answer 1

Edit: I've been looking at this wrong the whole way.

You're never changing the route, that's why your scroller is not working.

Your initial menu is captured with regular anchorScroll stuff.

But when you later hide that one and "show portfolio header", you link to stuff which are not the new routes. <a href="/?scrollTo=contact"> is still a / route, it just has some params. So your route never changes and your router does not react.

Without going into details of why you have different menus, I'd say that in the portfolio header, you would be better off using ng-click instead of href there and trigger scroll programatically.

Or better yet, just merge the two menus, they seem similar enough. Just show-hide the hero container, not the whole menu.

If I understood the question correctly, this is your problem:

href="/?scrollTo=contact"

Change that to

href="#/?scrollTo=contact"

And your scrollTo works. That's because if your browser (e.g. Chrome) sees a href with a /?scrollTo=contact, it says "Ah, a real link! To / (or index.html. It navigates right away, without giving JavaScript (and angular) time to work.

But when you add a # in front of the link, browser doesn't navigate, it knows it needs to stay on the same page, just different anchor. And this now gives Angular time to catch your click and work with it.

As a side note: since your local dev environment probably redirects everything not matched to index.html, it's why that part of works locally - on plunker it tries to go to it's home page with that link, but they don't have it so it gives you 404.

Answer 2

Hi i dont know if you resolve it but this is what i did and it worked for me :)

<a ng-click="scrollTo($event, id)">dasdsa</>
<div id="id"></div>
/// ctrller
$scope.scrollTo = function(event, id){
   event.preventDefault();
   var old = $location.hash();
   $anchorScroll();
   $location.hash(old);
}