<!DOCTYPE html>
<html ng-app="ionic">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="../../../../dist/css/ionic.css" />
    <script src="../../../../dist/js/ionic.bundle.js"></script>

  </head>

  <body>

    <div ng-controller="MyCtrl">
      <ion-header-bar class="bar-positive">
        <div class="buttons">
          <button class="button button-icon icon ion-clock" ng-click="doScroll()"></button>
        </div>
        <h1 class="title">Click the Clock to Get Stuck</h1>
      </ion-header-bar>

      <ion-content class="has-header">

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

      </ion-content>
    </div>

    <script>
function MyCtrl($scope, $location, $ionicScrollDelegate) {
  $scope.items = [];
  for (var i=0; i < 100; i++) {
    $scope.items.push({id:i});
  }

  $scope.doScroll = function() {
    $location.hash('foo-50');
    $ionicScrollDelegate.anchorScroll(true);
  }
}
    </script>
    </body>
    </html>
