Ionic Scroll To Specific List Item

Question

Is there a way to scroll to a specific item in a ion-list?

For example in this codepen: https://codepen.io/anon/pen/grEBQJ

When I Go to test button, I want to scroll to the list item with the text "Text".

<button ng-click="goTo()">Go to test</button>

<ion-list class="item">Test</ion-list>

I didn't find any examples so goTo is just blank:

$scope.goTo = function(){

}

Answer 1

You have to set an id to list element like :

<ion-item id="item{{item.id}}" ng-repeat="item in items">
      Item {{ item.id }}
</ion-item>

And then, $scope.goTo() method must modify location hash and call anchorScroll() method from $ionicScrollDelegate service :

$scope.goTo = function(id){
     $location.hash('item'+id);
     $ionicScrollDelegate.anchorScroll();
}

Check $ionicScrollDelegate documentation for more information.

Update with your codepen : https://codepen.io/anon/pen/RadXqL

Answer 2

I implemented this functionality with JavaScript. After nesting each ion-item in a div element, passed the div element id to the JS function below.

scrollTo(element:string) {

      document.getElementById(element).scrollIntoView();

  }