

ons-list を使用したアプリを作成していますが，起動時に，リストを最下段までスクロールした状態で起動したいと考えています．うまい方法はないでしょうか．


CC BY-SA 3.0
2015-08-22T06:34:21.643
14722
2016-07-13T07:46:40.560
11025
question
monaca onsen-ui
ons-list の初期位置


下記URLの内容のように、AngularJSの$location.hash、$anchorScrollを利用すれば、最下段までスクロールさせることができます。  
問題点としては、起動時に一瞬スクロールする動きがあることと、ons-list-itemの最下段にidを設定することでしょうか。

参照URL <https://teratail.com/questions/2879>

index.html

[code]

    <!DOCTYPE HTML>
    <html la="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <script>
    var app = ons.bootstrap("myApp", ["onsen"]);
    app.controller("page1Controller", ["$scope", "$location", "$anchorScroll", function($scope, $location, $anchorScroll) {
        ons.ready(function() {
            $location.hash("scrollBottom");
            $anchorScroll();
        });
    }]);
        </script>
    </head>
    <body>
        <ons-navigator var="myNavigator" page="page1.html">
        </ons-navigator> 
    </body>
    </html>
    
[/code]

page1.html

[code]

    <ons-page ng-controller="page1Controller">
        <ons-toolbar>
            <div class="center">Navigator</div>
        </ons-toolbar>
        <ons-scroller style="width: 100%; height: 200px;">
            <ons-list>
                <ons-list-item modifier="chevron">
                    1.aaa
                </ons-list-item>
                <ons-list-item modifier="chevron">
                    2.bbb
                </ons-list-item>
                <ons-list-item modifier="chevron">
                    3.ccc
                </ons-list-item>
                <ons-list-item modifier="chevron">
                    4.ddd
                </ons-list-item>
                <ons-list-item modifier="chevron">
                    5.eee
                </ons-list-item>
                <ons-list-item modifier="chevron">
                    6.fff
                </ons-list-item>
                <ons-list-item modifier="chevron">
                    7.ggg
                </ons-list-item>
                <ons-list-item modifier="chevron">
                    8.hhh
                </ons-list-item>
                <ons-list-item modifier="chevron">
                    9.iii
                </ons-list-item>
                <ons-list-item modifier="chevron" id="scrollBottom">
                    10.jjj
                </ons-list-item>
            </ons-list>
        </ons-scroller>
    </ons-page>
    
[/code]


CC BY-SA 3.0
2015-08-22T13:58:39.487
14735
2015-08-22T13:58:39.487
9566
14722
answer