CODEWITHSUNDEEP
javascriptangularjsionic-framework
Sumama Waheed
Sumama Waheed

Reputation: 3609

Ionic Scroll To Specific List Item

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(){

}

Upvotes: 5

Views: 11439

Answers (2)

javapedia.net
javapedia.net

Reputation: 2731

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();

  }

Upvotes: 5

Aynolor
Aynolor

Reputation: 413

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

Upvotes: 14

Related Questions