onsen Navigationで、toolbar からコンテンツの表示位置を移動させたい。

Monacaで、Onsen UI Navigation のテンプレートを使ってアプリを製作しています。

質問です。

ツールバー上にあるボタンをクリックすると、
下のコンテンツ（？）部分が縦に長く、コンテンツ部分の一番上が
表示されていない場合に、表示位置を一番上に移動させたいのですが、
scrollTo(0, 0);
ではうまくいきません。
どのような解決方法がございますでしょうか。
function move()
にどのような内容を書けばよいのか、
お分かりの方ぜひご教示よろしくおねがいいたします。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    // Page init event
17    document.addEventListener('init', function(event) {
18      var page = event.target;
19
20      if (page.matches('#first-page')) {
21
22        page.querySelector('#push-button').onclick = function() {
23          document.querySelector('#navigator').pushPage('page2.html');
24        };
25
26      } else if (page.matches('#second-page')) {
27
28        page.querySelector('#pop-button').onclick = function() {
29          document.querySelector('#navigator').popPage();
30        };
31
32      }
33    });
34
35    if (ons.platform.isIPhoneX()) {
36      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
37      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
38    }
39    function move(){
40
41      scrollTo(0, 0);
42    }
43  </script>
44</head>
45<body>
46  <ons-navigator id="navigator" page="page1.html"></ons-navigator>
47
48  <ons-template id="page1.html">
49    <ons-page id="first-page">
50      <ons-toolbar>
51        <div class="center">Page 1<ons-button onclick="move()">top</ons-button></div>
52      </ons-toolbar>
53      <div id = "abc"></div>
54      <div class="content" style="text-align: center">
55        <p>This is the first page.とてもとても縦に長いコンテンツがはいります。
56
57        </p>
58        <ons-button id="push-button">Push page</ons-button>
59      </div>
60    </ons-page>
61  </ons-template>
62
63  <ons-template id="page2.html">
64    <ons-page id="second-page">
65      <ons-toolbar>
66        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
67        <div class="center">Page 2</div>
68      </ons-toolbar>
69
70      <div class="content" style="text-align: center">
71        <p>This is the second page.</p>
72        <ons-button id="pop-button">Pop page</ons-button>
73      </div>
74    </ons-page>
75  </ons-template>
76</body>
77</html>

taiyakix

2019/12/08 07:02 編集

コードはmarkdownでコードを書くところに書いてくださいあと、<br>をいくつも書くのはみっともないし引き継ぐのに支障が出ます

hagakenG

2019/12/08 09:48

申し訳ございませんでした。訂正いたしました。

行動規範の内容に同意します

回答1件

ベストアンサー

Chrome DevToolsを使用して、どの箇所がスクロールしているか確認すると、<div class="content" style="text-align: center">.....</div>がスクロールしているので、divのscrollTopをゼロに設定すれば先頭に戻ります。

JavaScript
1function move() {
2  document.querySelector("#first-page .content").scrollTop = 0;
3}

投稿2019/12/08 10:37

otak-lab

総合スコア276

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問