Angular.js: Angular should provide a way to scroll to a specific element on the page

Created on 1 Nov 2010  ·  10Comments  ·  Source: angular/angular.js

Fragment identifiers (hash) are usually used to link to specific places in a long page. This doesn't work with angular since the hash is being used to implement the route. A way to scroll down the page to a specific element should be provided.

feature

All 10 comments

Yep, and then, we should use it with $location - as now, we support hash as well, so whenever $location.hash() changes, we should scroll to it...

This was already implemented. If $location operates in html5 mode then just create href="#anchor" links

Sorry to bump on that, but what if we are not in html5 mode ? see this two fidle for references :
http://jsfiddle.net/gabrielstuff/SdGnR/ which use the router and breaks the anchor linking.
and this one
http://jsfiddle.net/gabrielstuff/nYxFg/ which is not using any router and correctly allow to jump along the same page.

Also not the trying with HTML5 did not help much (but this is an other ticket)

I have the same problem. I'm not in html5 mode. How would this work in hashbang mode?

I agree this behavior is very unexpected. Even if someone is not using HTML5 mode Angular shouldn't break this expected behaviour when using a hash with an anchor.

As I understand it, Angular should just simply ignore any links with explicit hashes in them anyways. If we aren't using HTML5 the link <a href="/something"... will automatically get rewritten as /#/something (unless I target _self). So <a href="#something" should arguably always go to /#something

+1

I think you should use anchorScroll to do that.

Just curious @IgorMinar could we get a comment on whether or not this issue is going to be fixed? One could argue that it doesn't need to be on the basis of outdated browsers not being fully supported but I think a clear answer on whether or not anchor links should work with browsers that don't support the history API.

I get the problem though, if I'm at #/route1 then it's hard to be at #/route1#anchor. The hack mentioned here (http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html) seems ok, but it would be ideal if this "just worked". Anyways if the $anchorScroll hack is the solution then it might be good to say that and perhaps someone can update the documentation to reflect how this problem should be solved for older browsers.

Here ( http://stackoverflow.com/a/15935517/2071612) is a brilliant solution.

BTW, I have submitted a PR (#9596) for adding support for scrolling independently of $location.hash().

Was this page helpful?
0 / 5 - 0 ratings