15135


ons-listと、ons-list-itemを使って、リスト表示するアプリを作りました。  
listの下の方まで閲覧しているとき、メニューの「先頭を表示」ボタンを押すことで、listを巻き戻し、先頭のlist-
itemから表示できるようにしたいと思っています。  
どのようにすれば良いのでしょうか？

初歩的なことかもしれませんが、よろしくお願いいたします。


CC BY-SA 3.0
2015-09-01T17:16:38.250
15125
2015-09-02T02:34:11.990
11105
question
monaca onsen-ui
ons-listでボタンを押したとき、先頭のlist-itemを表示させたい。


[ons-list の初期位置](https://ja.stackoverflow.com/questions/14722/ons-
list-%E3%81%AE%E5%88%9D%E6%9C%9F%E4%BD%8D%E7%BD%AE)

と同様に、AngularJSを利用して、先頭のons-list-
itemにidを設定し、「先頭を表示」ボタン押下時に$location.hash()、$anchorScroll()を実行すれば、先頭から表示させることができます。


CC BY-SA 3.0
2015-09-02T01:55:44.967
15131
2015-09-02T01:55:44.967
2017-04-13T12:52:39.113
-1
9566
15125
answer


対象ノードの`scrollTop`を設定する方法もあるようなので参考程度に記載しておきます。  
せっかくなので、oTakさんの記載している方法も盛り込んでみました。

[code]

    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();
      }
    }]);
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-09-02T02:34:11.990
15135
2015-09-02T02:34:11.990
3516
15125
answer