AnchorScroll is not working on Collection repeat


#1

Hi all,
I need to use anchor scroll on collection repeat, please provide some working codepen so that i can use it,

I tried to use it but as i tap on some id it will scroll the list to the top, please suggest some solution.

Thanks !


#2

Maybe you can use $ionicScrollDelegate.scrollTo()
http://ionicframework.com/docs/api/service/$ionicScrollDelegate/

To scroll to the right position (index of the list entry * item height?).

Greets bengtler.


#3

hi @bengtler yeah scrollto() works fine in it but that is not efficient way to implement it in my list, so what i want is i have a list of contacts in which contacts have arranged in alphabetical order contacts starts with A then contacts starts with B and so on. So i have assigned id to each alphabet so when user taps on D so my list should scroll upto D and this tapping is done on a button which is not a part of list. so please let me know how i can able to achieve it.

i tried to use the @mhartington solution but it is not working in collection repeat.


#4

Please show us your code in a codepen.

In your case also the anchorScroll should work.
Please read the part of “anchorScroll” on http://ionicframework.com/docs/api/service/$ionicScrollDelegate/.

You have to set window.location.hash to your id, you want to scroll to and then call anchorScroll.

Greetz.


#5

Please check both the code pens, i am able to find the issue in the below link anchorscroll works perfectly
as suggested by @mhartington

http://codepen.io/mhartington/pen/Ioclv

I have edited the above codepen and found that if we place our content in ng-repeat under

tag then anchorscroll works fine but if i change
tag to then it won’t work as shown in the below codepen

http://codepen.io/anon/pen/bIqeJ

Please have a look on this and let me know how can i able to eradicate this issue.


#6

Hey there guys, so the issue with the second codepen has been resolved in the nightly builds.


#7

Thanks @mhartington for thiss working solution :slight_smile: kudos


#8

Hello @mhartington it’s kind of strange.

I’m still stuck with the AnchorScroll on Collection repeat with beta 14.
The scrollBottom() is working properly though…


#9

hello @mhartington thank you a lot for this solution

I tried to apply it but every time this error occurred “TypeError: href is undefined”

can you help me ?

my app different with the following…
I don’t want to scroll to item when i click a button …
Instead of that… I want to scroll to specific item when I change ng-model


#10

when I test ng-click as you did … this error appears

TypeError: undefined is not a function here:

*location = $location.hash(location);*

When I think I concluded that :: $location here is undefined Though I passed it to controller … but I don’t know how to fix this problem :’(


#11

Is there any progress on this topic? ng-repeat works just fine but collection-repeat doesn’t seem to work.


#12

I use Ionic 1.3.1 and also can get this to work only using ng-repeat but not with collection-repeat.


#13

+1 any fix for this?