How to make Ionic list Scrollable by their pixel position with angularjs on button click using $ionicScrollDelegate?

Question

after the research for scrolling by pixel position i wrote code successfully and working fine for me

<ion-tab>
<ion-nav-view>
<ion-content delegate-handle="Scroll1"  overflow-scroll="false" >
            <div>
              <div class="row" collection-repeat="dataitem in Data" >
                <div class="col" style="margin:6px 4px !important">{{dataitem.DATE | date:'MMM/dd/yyyy'}} </div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.TIME | date: "HH:mm:ss"}}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.NAME}}</div>
                <div class="col" style="margin:6px 4px !important;">{{ dataitem.ADDRESS | limitTo: limitToValue }}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.AMOUNT | currency | bracketless}}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.BALANCE|currency}}</div>
              </div>
            </div>
</ion-content>
</ion-nav-view>
</ion-tab>

Answer 1

In your html file

<ul class="page-scroll-buttons">
      <li>
        <i class="fa fa-arrow-circle-down"  ng-click="scrollDownBtn();"></i>
      </li>
      <li>
        <i class="fa fa-arrow-circle-up" ng-click="scrollUpBtn()"></i>
      </li>
        </ul>

<ion-tab>
<ion-nav-view>
<ion-content delegate-handle="Scroll1"  overflow-scroll="false" >
            <div >
              <div class="row" collection-repeat="dataitem in Data" >
                <div class="col" style="margin:6px 4px !important">{{dataitem.DATE | date:'MMM/dd/yyyy'}} </div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.TIME | date: "HH:mm:ss"}}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.NAME}}</div>
                <div class="col" style="margin:6px 4px !important;">{{ dataitem.ADDRESS | limitTo: limitToValue }}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.AMOUNT | currency | bracketless}}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.BALANCE|currency}}</div>
              </div>
            </div>
</ion-content>
</ion-nav-view>
</ion-tab>

In your controller.js file

var t;
$scope.scrollDownBtn = function (){         
                t=  $ionicScrollDelegate.$getByHandle("Scroll1").getScrollPosition();
                $ionicScrollDelegate.$getByHandle("Scroll1").scrollTo(0, t.top+80, true);

                };

$scope.scrollUpBtn = function () {
           t=  $ionicScrollDelegate.$getByHandle("Scroll1").getScrollPosition();
           $ionicScrollDelegate.$getByHandle("Scroll1").scrollTo(0, t.top-80, true);
               };