Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow $anchorScroll.scroll() independent of location.hash #4568

Closed
hasdavidc opened this issue Oct 21, 2013 · 18 comments
Closed

Allow $anchorScroll.scroll() independent of location.hash #4568

hasdavidc opened this issue Oct 21, 2013 · 18 comments

Comments

@hasdavidc
Copy link

@hasdavidc hasdavidc commented Oct 21, 2013

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

@hasdavidc hasdavidc closed this Oct 22, 2013
@nidDrBiglr
Copy link

@nidDrBiglr nidDrBiglr commented May 17, 2014

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
Copy link

@fabdrol fabdrol commented Aug 26, 2014

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

@tmikoss
Copy link

@tmikoss tmikoss commented Oct 8, 2014

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

@gkalpak
Copy link
Member

@gkalpak gkalpak commented Oct 8, 2014

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

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

@RichardLitt RichardLitt reopened this Oct 8, 2014
@RichardLitt
Copy link
Member

@RichardLitt RichardLitt commented Oct 8, 2014

👍

@IgorMinar
Copy link
Member

@IgorMinar IgorMinar commented Oct 9, 2014

@fabdrol looks like the original issue author closed it

@IgorMinar IgorMinar added this to the Backlog milestone Oct 9, 2014
@RichardLitt
Copy link
Member

@RichardLitt RichardLitt commented Oct 9, 2014

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

gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 13, 2014
Add support for `hash` being explicitly passed as parameter to
`$anchorScroll` and fall back to `$location.hash()` otherwise.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 13, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 13, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 14, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 15, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 16, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 18, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 20, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 23, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 24, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 24, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 25, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 27, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 18, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 19, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 21, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 23, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 24, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 27, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Dec 1, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Dec 7, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Dec 10, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Dec 19, 2014
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Jan 20, 2015
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Feb 19, 2015
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Mar 27, 2015
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Apr 2, 2015
…ation.hash()`

Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted, the value of
`$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Apr 2, 2015
Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted or is not a string,
the value of `$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Apr 2, 2015
Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted or is not a string,
the value of `$location.hash()` will be used instead.

Closes angular#4568
gkalpak added a commit to gkalpak/angular.js that referenced this issue Apr 2, 2015
Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted or is not a string,
the value of `$location.hash()` will be used instead.

Closes angular#4568
@gkalpak gkalpak closed this in 731c8b5 Apr 2, 2015
@siva3378
Copy link

@siva3378 siva3378 commented May 1, 2015

Do we have any solution for this..??

@gkalpak
Copy link
Member

@gkalpak gkalpak commented May 1, 2015

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

@siva3378
Copy link

@siva3378 siva3378 commented May 3, 2015

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

@gkalpak
Copy link
Member

@gkalpak gkalpak commented May 3, 2015

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

@siva3378
Copy link

@siva3378 siva3378 commented May 3, 2015

@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
Copy link
Member

@gkalpak gkalpak commented May 3, 2015

@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
Copy link

@ghost ghost commented May 28, 2015

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

@rebelliard
Copy link

@rebelliard rebelliard commented May 28, 2015

This works for me:

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

@gkalpak gkalpak commented May 28, 2015

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

netman92 added a commit to netman92/angular.js that referenced this issue Aug 8, 2015
Add an optional argument to `$anchorScroll()` to enable scrolling to an
anchor element different than that related to the current value of
`$location.hash()`. If the argument is omitted or is not a string,
the value of `$location.hash()` will be used instead.

Closes angular#4568
Closes angular#9596
@vippatel90
Copy link

@vippatel90 vippatel90 commented Jul 28, 2017

@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
Copy link
Member

@gkalpak gkalpak commented Jul 28, 2017

@vippatel90, (just in case you missed it) there is a simpler, safer alternative (see #4568 (comment)).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

You can’t perform that action at this time.