Q&A
コードはmarkdownでコードを書くところに書いてください
あと、<br>をいくつも書くのはみっともないし引き継ぐのに支障が出ます
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>
回答1件
0
ベストアンサー
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
総合スコア276
あなたの回答
tips
プレビュー
