Angular.js: Allow $anchorScroll.scroll() independent of location.hash

[hasdavidc]

I'm wondering if there is a specific reason $anchorScroll can only scroll to the hash location and if this could be extended to simply allow an ID to be passed in to the scroll() function to override hash.

https://github.com/angular/angular.js/blob/master/src/ng/anchorScroll.js#L72-L86

[nidDrBiglr]

I too, would appreciate this. I ran into the problem, where i had multiple hashes in my url, which made the $anchorScroll to freak out.

[fabdrol]

@hasdavidc why was this closed without any real answer to the question?

[tmikoss]

+1, would like to see this implemented. document.getElementById('anchor').scrollIntoView() works, but seems very un-angular.

[gkalpak]

@hasdavidc : Why did you close the issue ? (Just being curious.)

It seems a reasonable feature request (and not very difficult to implement).

[RichardLitt]

:+1:

[IgorMinar]

@fabdrol looks like the original issue author closed it

[RichardLitt]

@IgorMinar Yep. Figured reopening was easier than making another issue.

[siva3378]

Do we have any solution for this..??

[gkalpak]

This functionality is already available since recently (since v1.4.0-rc.0 iirc).

[siva3378]

@gkalpak, can I have any ref link where can I check more about it... plz..

[gkalpak]

@siva3378, not sure what you mean. You can check out the docs.

[siva3378]

@gkalpak, In the docs, it clearly specified, "set the $location.hash to newHash and $anchorScroll will automatically scroll to it", but I don't want to change the URL in the address bar and I want to scroll it to particular div of Id="category-{{index}}"
Is there any other methods like $anchorScroll("category-21"); scrolls to a div of id="category-21"

[gkalpak]

@siva3378, are you viewing an older version of the docs ? (Like I said, the feature was only recently added).

In the latest docs (linked above) it mentions clearly:

When called, it scrolls to the element related to the specified hash or (if omitted) to the current value of $location.hash(), according to the rules specified in the HTML5 spec.

It also watches the $location.hash() and automatically scrolls to match any anchor whenever it changes. This can be disabled by calling $anchorScrollProvider.disableAutoScrolling().

And in _Usage_ and _Arguments_ sections:

Usage
$anchorScroll([hash])

Arguments
hash (optional) | string | The hash specifying the element to scroll to. If omitted, the value of $location.hash() will be used.

[ghost]

@gkalpak Is there any (plunker) example for the usage of $anchorScroll independently of location.hash? Didn't get it to work as expected.

[rebelliard]

This works for me:

$rootScope.$on('$routeChangeSuccess', function(event) {
    var old = $location.hash();
    $location.hash('my-new-hash');
    $anchorScroll();
    $location.hash(old);
});

[gkalpak]

@s134319: Here is a working demo. Basically, all you got to do is call $anchorScroll('some-hash').

[vippatel90]

@rebelliard : This is not ideal solution of temporary putting hash and then scroll to that hash and again changing to old hash to just to stay as it is in address bar.

IF you put temporary hash and you are running SPA with router which is most likely the case, then you will get immediately redirected to error page as all good SPA website make redirection to page not found kind page for invalid hash.

[gkalpak]

@vippatel90, (just in case you missed it) there is a simpler, safer alternative (see https://github.com/angular/angular.js/issues/4568#issuecomment-106621383).