ons-listと、ons-list-itemを使って、リスト表示するアプリを作りました。
listの下の方まで閲覧しているとき、メニューの「先頭を表示」ボタンを押すことで、listを巻き戻し、先頭のlist-itemから表示できるようにしたいと思っています。
どのようにすれば良いのでしょうか?
初歩的なことかもしれませんが、よろしくお願いいたします。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加する対象ノードのscrollTop
を設定する方法もあるようなので参考程度に記載しておきます。
せっかくなので、oTakさんの記載している方法も盛り込んでみました。
ons.bootstrap()
.controller('ListCtrl', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {
$scope.top = function() {
// もっと上手い取り方があるかもしれません
var elem = myList._element[0];
elem.parentNode.scrollTop = 0;
}
$scope.top2 = function() {
$location.hash("scrollTop");
$anchorScroll();
}
}]);
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<ons-navigator title="Navigator" var="myNavigator">
<ons-page ng-controller="ListCtrl">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="top()">scrollTop</ons-toolbar-button>
<ons-toolbar-button ng-click="top2()">anchorScroll</ons-toolbar-button>
</div>
<div class="center">Basic List</div>
</ons-toolbar>
<ons-scroller>
<ons-list var="myList">
<ons-list-header id="scrollTop">Numbers</ons-list-header>
<ons-list-item>One</ons-list-item>
<ons-list-item>Two</ons-list-item>
<ons-list-item>Three</ons-list-item>
<ons-list-item>Four</ons-list-item>
<ons-list-item>Five</ons-list-item>
<ons-list-item>Six</ons-list-item>
<ons-list-item>One</ons-list-item>
<ons-list-item>Two</ons-list-item>
<ons-list-item>Three</ons-list-item>
<ons-list-item>Four</ons-list-item>
<ons-list-item>Five</ons-list-item>
<ons-list-item>Six</ons-list-item>
<ons-list-item>One</ons-list-item>
<ons-list-item>Two</ons-list-item>
<ons-list-item>Three</ons-list-item>
<ons-list-item>Four</ons-list-item>
<ons-list-item>Five</ons-list-item>
<ons-list-item>Six</ons-list-item>
<ons-list-item>One</ons-list-item>
<ons-list-item>Two</ons-list-item>
<ons-list-item>Three</ons-list-item>
<ons-list-item>Four</ons-list-item>
<ons-list-item>Five</ons-list-item>
<ons-list-item>Six</ons-list-item>
<ons-list-header>Tappable Numbers</ons-list-header>
<ons-list-item modifier="tappable">Tap Me</ons-list-item>
<ons-list-item modifier="tappable">Tap Me</ons-list-item>
<ons-list-item modifier="tappable">Tap Me</ons-list-item>
<ons-list-item modifier="tappable">Tap Me</ons-list-item>
<ons-list-item modifier="tappable">Tap Me</ons-list-item>
<ons-list-item modifier="tappable">Tap Me</ons-list-item>
</ons-list>
</ons-scroller>
</ons-page>
</ons-navigator>
<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>
と同様に、AngularJSを利用して、先頭のons-list-itemにidを設定し、「先頭を表示」ボタン押下時に$location.hash()、$anchorScroll()を実行すれば、先頭から表示させることができます。