It would be great if Ionic would feature a vertical alphabet that would jump to a section of a list.
(I believe Apple calls this an ‘indexed list’.)
It is currently impossible to implement this myself due to what I assume is a bug in anchorscroll in relation to the content element. See: Content stuck after anchorscroll
Hey @coen_warmer, this is definitely on our list. Along with the fixed list item dividers. Stay tuned!
There is some news ? I don’t find in the doc…anyway it’s a killer feature for a great framework!
I’m developing an app that need it :(.
Anyway I’m very impressed with work that you have done with Ionic Framework!!!
The bug in Scrolling has since been resolved (even though the implementation of the scroll delegate is set to change going into the 1.0 beta) so it’s possible to make something like this yourself.
The following is tested in 0.9.27.
In your list you can add an anchor to the divider ( so <ion-item type="divider" id="index_A">A</ion-item> etc).
Then create the elements that will trigger the jump, so something like:
<ul>
<li><a ng-click="gotoList('index_A')">A</li>
<li><a ng-click="gotoList('index_B')">B</li>
<!-- etc -->
</ul>
Style this with CSS so it’s vertical and it remains to the right of the viewport.
Finally, implement a scroll function in your controller with:
.controller('MyCtrl', function($scope, $stateParams, $location, $ionicScrollDelegate) {
$scope.gotoList = function(id){
$location.hash(id);
$ionicScrollDelegate.anchorScroll();
}
})
Good luck!
Great!
Anyway I suggest to write it also in the doc, because it’s a killer feature for a mobile framework…with many other frameworks it’s very hard do the indexed list.
Hey @coen_warmer have you made any progress on this?
Hey @mhartington I basically built my alphabet selector as I described in my earlier post… I haven’t turned it into a directive or a module or anything. Mainly because I’m still wrapping my head around Angular. Could be a nice project though… (note to self)
If anyone is looking for a way to implement this right now though, the approach I described does indeed work.
Hey @max Any estimation this feature will be implemented ?
Hey @coen_warmer can you please make the demo of it in codepen. I badly need this feature to get implemented in my project. I have posted my query here I need to make alpha scroll same as in ionic framework
Please make out some fiddle or plinker so that i can better understand
@h4ck3rviv3k I worked out this functionality this morning thanks to the help of this thread. i threw it in code pen so others can use it : )
Cheers!
EDIT: not sure why the above isn’t working if you goto the link directly it seems to work…
@max any update on this? ETA may be? I was able to create a vertical indexed list following @mikelucid codepen proj. But having trouble showing a compact indexed list in Landscape mode 
Hi @max @mikelucid ,i am also troubled to showing a compact indexed list in Landscape mode.could you please suggest me to how can i solve this .
Thank
Hey, I didn’t see anyone else who did it so I decided to make an ionic directive based on that codepen by @mikelucid : https://github.com/aquint/ion-alpha-scroll . Hopefully that helps some people who are looking into this!
@aquint, what if i had numbers in the name, what changes do i have to make to the ion-alpha-scroll.js? Thanks!
still no found any perfect solution for this feature, especially for collection repeat. 
I couldn’t get any of these examples to work. $location.hash was checking out and I could retrieve the anchors with css selectors but I couldn’t get anchorScroll to do anything. so I had to solve this with a hack:
$scope.scrollTo = function(a) {
var p_top = document.getElementById("index-"+a).offsetParent.offsetTop;
$ionicScrollDelegate.scrollTo(0, p_top, true)
};
Pretty damn ugly to have a selector in your controller like this, but if you’re in a spot (like I was) this works.
I implemented a variation of @aquint’s code in my app with success–thanks very much for posting that. One issue I had with it was $anchorScroll. In my app there was unpredictable navigation when clicking the side list, which may have been due to the presence of the section headers? Replacing it with a slight variation of @vicinitysoftware’s solution above made it work correctly–finally! Previously, I had resorted to using scrollTop with location.hash, but the side effect of that approach was that I was unable to scroll above the selected div, which was not exactly desirable.
My app required unusual sorting for the navigation list, which is what prompted an update. It allows one to sort by to a hidden key, rather than by the displayed values, at the cost of some more complexity in how the library is specified. Since the last commit, there are some code improvements that have yet to be posted. https://github.com/billsanto/ion-index-scroll-demo
I actually had to change my tactic as I had to use collection-repeat for my list (the list was too long and loading it with repeat made the view unusable).
Of course the anchor trick with offsetParent.offsetTop won’t work as with collection-repeat the element isn’t added to the dom yet. Luckily the height of every element is calculated by the largest item in the list or you can set it to a fixed value which means scrollTop is easy to calculate based on array index. A short example of this:
$scope.scrollTo = function(entry_idx) {
var p_top = entry_idx * 100; // 100 being the pixel height of a single entry
$ionicScrollDelegate.scrollTo(0, p_top, true);
};
I suggest using a different method for getting the height of a list item, but I wanted to keep the example short.
Of course you still need to build up an array or object with a reference to the index of where the letter is first found in your list array.
Again, not pretty, but works when you’re in a pinch
All of these solutions didn’t actually apply to real world applications. All of the solutions provided above uses ng-repeat inside the directive itself, and for more complex applications that use collection-repeat (in our case) doesn’t apply to the directive itself.
I suggest giving the option to use ng-repeat or collection-repeat to the user itself.
Additionally, all of the solutions above uses a static alphabet list. Any additional-unnecessary letters are not a great UX.
A solution if anybody still needs this: GitHub - mooalot/alphabetical-scroll-bar: An alphabetical scroll bar used for apps and websites.