Ion scroll to a specific list item

Question

Is there a way to scroll to a specific element in the ion list?

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

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

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

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

I did not find examples, so goTo is just empty:

$scope.goTo = function(){

}

Answer 1

You need to set an identifier for the list item, for example:

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

And then, the method $scope.goTo()should change the location hash and call the method anchorScroll()from the service $ionicScrollDelegate:

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

Learn more about the $ ionicScrollDelegate documentation .

: https://codepen.io/anon/pen/RadXqL

Answer 2

JavaScript. ion div id div JS- .

scrollTo(element:string) {

      document.getElementById(element).scrollIntoView();

  }