ons.bootstrap()
.controller('homeCtrl', function($scope, $element){
var scrollWrapper = $element.find('.page__content');
$scope.scrollTop = scrollWrapper.scrollTop();
$scope.goToTop = function(){
scrollWrapper.animate({'scrollTop': 0}, 'slow');
};
scrollWrapper.on('scroll', function(e){
$scope.$apply(function(){
$scope.scrollTop = e.target.scrollTop;
});
});
});
.scroll-value{
width: 100px;
position: fixed;
right: 0;
top: 0;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span>Home</span>
</ons-tab>
<ons-tab page="fav.html">
<ons-icon icon="ion-star"></ons-icon>
<span>Favorites</span>
</ons-tab>
<ons-tab page="settings.html">
<ons-icon icon="ion-gear-a"></ons-icon>
<span>Settings</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-page ng-controller="homeCtrl">
<div class="scroll-value">{{scrollTop}}</div>
<ons-list>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
</ons-list>
<div style="text-align:center">
<ons-button ng-click="goToTop()">トップへ戻る</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="fav.html">
fav
</ons-template>
<ons-template id="settings.html">
settings
</ons-template>
ons-tabbar
使用時のスクロール位置の取得には.page__content
のscrollTop
が利用できます。