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

Closed
hasdavidc opened this Issue Oct 21, 2013 · 16 comments

Projects

None yet
@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

@hasdavidc hasdavidc closed this Oct 22, 2013
@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
fabdrol commented Aug 26, 2014

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

@tmikoss
tmikoss commented Oct 8, 2014

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

@gkalpak
Member
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
Contributor

👍

@IgorMinar
Member

@fabdrol looks like the original issue author closed it

@IgorMinar IgorMinar added this to the Backlog milestone Oct 9, 2014
@RichardLitt
Contributor

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

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

Closes #4568
2452e3c
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 13, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
f417627
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 13, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
7ccc968
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 14, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
e9cb104
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 15, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
49671a7
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 16, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
671bf6b
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 18, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
b691f39
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 20, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
9e8823d
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 23, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
d76123a
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 24, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
8a70dac
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 24, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
2be357b
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 25, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
89dec80
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 27, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
b4f3d67
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 27, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
b00921b
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 28, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
9e53ae0
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 29, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
6862b00
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Oct 31, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
a3f1098
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 2, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
d915061
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 4, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
dda4c91
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 10, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
6b6fef7
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 11, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
e262ed2
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 11, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
9300d60
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 12, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
c2f0c38
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 13, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
ac8d69c
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 14, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
40a793e
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 18, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
9afc493
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 19, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
7712a8e
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 21, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
6b99562
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 23, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
14c5216
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 24, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
69b47be
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Nov 27, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
f9fa6dc
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Dec 1, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
ef451f7
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Dec 7, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
dacfd0a
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Dec 10, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
ab050c4
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Dec 19, 2014
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
2068e44
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Jan 20, 2015
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
ecba1e5
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Feb 19, 2015
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
04cd27f
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Mar 27, 2015
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
6b2549d
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Apr 2, 2015
@gkalpak gkalpak feat($anchorScroll): add support for scrolling independently of `$loc…
…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 #4568
05c16db
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Apr 2, 2015
@gkalpak gkalpak feat($anchorScroll): allow scrolling to a specified element
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 #4568
3b9232a
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Apr 2, 2015
@gkalpak gkalpak feat($anchorScroll): allow scrolling to a specified element
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 #4568
d741c09
@gkalpak gkalpak added a commit to gkalpak/angular.js that referenced this issue Apr 2, 2015
@gkalpak gkalpak feat($anchorScroll): allow scrolling to a specified element
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 #4568
55f44b7
@gkalpak gkalpak added a commit that closed this issue Apr 2, 2015
@gkalpak gkalpak feat($anchorScroll): allow scrolling to a specified element
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 #4568
Closes #9596
731c8b5
@gkalpak gkalpak closed this in 731c8b5 Apr 2, 2015
@siva3378
siva3378 commented May 1, 2015

Do we have any solution for this..??

@gkalpak
Member
gkalpak commented May 1, 2015

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

@siva3378
siva3378 commented May 3, 2015

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

@gkalpak
Member
gkalpak commented May 3, 2015

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

@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
Member
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.

@mschallnahs

@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
Member
gkalpak commented May 28, 2015

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

@netman92 netman92 added a commit to netman92/angular.js that referenced this issue Aug 8, 2015
@gkalpak @netman92 gkalpak + netman92 feat($anchorScroll): allow scrolling to a specified element
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 #4568
Closes #9596
7e91cc5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment