一番上へ移動のマークを表示するにはどうすればいい？

2023/09/06 04:49

このQ&Aのポイント

data-role属性との相性により、一番上へ移動のマークが表示されない場合があります。
data-role属性を使用しつつ一番上へ移動のマークを表示するには、以下の手順を実行します。
1. CSSで.page-topクラスを定義し、position: fixed;を設定します。また、.move-page-topクラスのスタイルも指定します。

ベストアンサー

一番上へ移動のマークを表示するにはどうすればいい？

2015/11/14 08:41

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> </head> <style type="text/css"> .page-top { margin: 0 ; padding: 0 ; } .page-top p { margin: 0 ; padding: 0 ; position: fixed ; right: 16px ; bottom: 16px ; } .move-page-top { display: block ; background: #D36015 ; width: 50px ; height: 50px ; color: #fff ; line-height: 50px ; text-decoration: none ; text-align: center ; -webkit-transition:all 0.3s ; -moz-transition:all 0.3s ; transition:all 0.3s ; } .move-page-top:hover { opacity: 0.85 ; } </style> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://自分のサイト.web.fc2.com/to-top/to-top.js"></script> <div id="page-top" class="page-top"> <p><a id="move-page-top" class="move-page-top">▲</a></p> </div> <div data-role="page"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div role="main" class="ui-content"> <ul data-role="listview"> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> </ul> </div> <div data-role="footer"> </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> これだと一番上へ移動が表示されません。しかし、 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> </head> <style type="text/css"> .page-top { margin: 0 ; padding: 0 ; } .page-top p { margin: 0 ; padding: 0 ; position: fixed ; right: 16px ; bottom: 16px ; } .move-page-top { display: block ; background: #D36015 ; width: 50px ; height: 50px ; color: #fff ; line-height: 50px ; text-decoration: none ; text-align: center ; -webkit-transition:all 0.3s ; -moz-transition:all 0.3s ; transition:all 0.3s ; } .move-page-top:hover { opacity: 0.85 ; } </style> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://自分のサイト.web.fc2.com/to-top/to-top.js"></script> <div id="page-top" class="page-top"> <p><a id="move-page-top" class="move-page-top">▲</a></p> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> これにすると表示されます。 data-roleとの相性が悪いのでしょうか？ data-roleを使いつつ、一番上へ移動のマークを表示するにはどうすればいいですか？

PXKRSIAH
お礼率97% (43/44)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

m_matsubara
ベストアンサー率48% (80/166)

2015/11/16 11:26 回答No.1

???? htmlを見たら、id=""で指定されていますね。 <p><a id="move-page-top" class="move-page-top">▲</a></p> ですが、cssの方を見ると「.」でclassを指定されている。まずはこの辺りを調整されてはいかがでしょうか？ .move-page-top

質問者

お礼 2015/11/23 07:30

ありがとうございました。

関連するQ&A

jquery.mobile　画像を中央に表示
<!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> </head> <body> <div id="home" data-role="page" data-theme="d"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider">test </li> <li> <a href="#"> <img src="C:\1.jpg"> test </a> </li> <li> <a href="#"> <img src="C:\2.jpg"> test </a> </li> </ul> </div> </body> </html> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが正方形ではない画像が、右上に寄ってしまうのですがこれを回避する方法はありますか？例で言うのであれば添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。
- ベストアンサー
- HTML
JQUERYのいくつかが順番によって機能しなくなり
JQUERYのいくつかが順番によって機能しなくなります。干渉を起こしているのかと思うのですが、どうすれば解決できるのでしょうか？var j = jQuery.noConflict();などをやってみましたが、知識不足でうまくいきませんでした。・top messageのみ動く。 var j = jQuery.noConflict();  <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> ・fontsizeとtop messageのみ動く。  <a href="#main" class="gotop"></a>  <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script>  <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script>  <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script>   <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> jQuery(function(){ jQuery("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script>  <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> 
- 締切済み
- JavaScript
jqueryの$.getJSONの処理結果について
jqueryの$.getJSONの結果およびその違いについて教えてください。以下の(1)と(2)の処理があり、(2)を(1)と同じ様に出力したいと考えておりますが、(2)では(1)のように「class="ui-li-static ui-body-inherit ui-first-child"」などが設定されずに出力されてしまいます。そのため、どのように記述すれば(1)と同じ結果になるのかをご教授いただけますでしょうか。また、宜しければ(1)と(2)の処理の違いを教えていただけると助かります。 ※chrome バージョン 43.0.2357.81 　apache-tomcat-7.0.53 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ (1)固定値で埋め込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $('#listviewtest').append('<li>1:aaaaaaa</li>'); $('#listviewtest').append('<li>2:bbbbbbb</li>'); $('#listviewtest').append('<li>3:ccccccc</li>'); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ui> </div> </div> </body> </html> 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li class="ui-li-static ui-body-inherit ui-first-child">1:aaaaaaa</li> <li class="ui-li-static ui-body-inherit">2:bbbbbbb</li> <li class="ui-li-static ui-body-inherit ui-last-child">3:ccccccc</li> </ul> (2)$.getJSONで読み込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $.getJSON( 'test.js', null, function(data, status) { var items = []; $.each(data, function(key, val) { items.push('<li>' + val.id + ':' + val.name + '</li>'); }); $('#listviewtest').append(items.join('')).trigger('create'); } ); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ul> </div> </div> </body> </html> 外部ファイル（test.js） [ {"id":1,"name":"aaaaaaa"}, {"id":2,"name":"bbbbbbb"}, {"id":3,"name":"ccccccc"} ] 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li>1:aaaaaaa</li> <li>2:bbbbbbb</li> <li>3:ccccccc</li> </ul>
- ベストアンサー
- JavaScript
jquery.mobile-1.1.1.min.c
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile Test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.js"></script> </head> ・・・以下省略のようにＨＰを作っているのですが、 jquery.mobile-1.1.1.min.cssの部分で設定されているcssの値を変更することは出来ないのでしょうか？例えば、 .ui-content .ui-listview { margin: -15px; } の値を、 margin: -15px; ではなく、 margin: 50px; にしたい場合、どうすればいいですか？ ul.ul_test { margin-top: 50px; } を作って、 <ul class="ul_test" としてみましたが、適用されませんでした。
- ベストアンサー
- CSS
一番上へ移動するスクリプト
今－－－－－－－－－－－－－－－－－－－－－－－－－ @charset "UTF-8"; #page-top{width:50px;height:50px;display:none;position:fixed;right:16px;bottom:16px; } #page-top p{margin:0;padding:0;text-align:center;background: #3b3b3b;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s; } #page-top p:hover{background:#8b8b8b; } #move-page-top{color:#fff;line-height:50px;text-decoration:none;display:block;cursor:pointer; } －－－－－－－－－－－－－－－－－－－－－－－－－というcssのコードで一番上へ移動するスクリプトを設置しているのですがボタンが画像のようにデフォルトで下の方へ表示されてしまいます。赤丸で囲った部分に表示させたいのですが CSSをいじればいいのでしょうか？それともjsの方をいじればいいのでしょうか？
- ベストアンサー
- CSS
H2にも色を付けたい、デザインを適用させたい
http://blog.direct-search.jp/2010/10/jquery-mobile.html のサイトを参考にしたのですが、 <h2>test</h2> も　<h1>Header</h1> のように、色を白にして背景を青にするデザインにするにはどうすればいいでしょうか？今は下記のコードのしていますが、そうすると画像の様に、<h2>test</h2> は太字でtestになってしまいます。 <html> <head> <meta charset="utf-8"> <title>jQuery Mobile テスト</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <section data-role="page" data-theme="b" id="ds-home"> <header data-role="header" data-theme="b"> <h1>Header</h1> </header> <article data-role="content"> <div>This is a test page.</div> <h2>test</h2> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category</li> <li><a href="#ds-page-1">First Child</a></li> <li><a href="#ds-page-2">Second Child</a></li> </ul> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category 2</li> <li><a href="#ds-page-3">First Child 2</a></li> <li><a href="#ds-page-4">Second Child 2</a></li> </ul> </article> <header data-role="footer" data-theme="b"> <h2>Footer</h2> </header> </section> </body> </html>
- ベストアンサー
- HTML
Jqueryスライダーが動きません。
WEB制作の素人です。簡単といわれている「FlexSlider2」ですが、私がやったところ、画像は出たもののスライドにならず、そのまま上下に出てしまいます。一度見ていただき、間違えを教えていただけますか？（ちなみにスムーススクロールは動きます）  <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script>    </head> <body id="@@(id)@@"> <div id="wrapper">  <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p>  <div id="main_visual"> <div class="flexslider"> <ul class="slides"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします。
- ベストアンサー
- JavaScript
Jqueryスライドが動きません。教えてください
WEB制作の素人です。皆さんが簡単といわれている「FlexSlider2」ですが、画像は出たもののスライドにならず、登録した画像がそのまま出てしまいます。一度見ていただけますでしょうか？（ちなみにスムーススクロールは動きます）  <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script>    </head> <body id="@@(id)@@"> <div id="wrapper">  <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p>  <div id="main_visual"> <div class="flexslider"> <ul class="slider"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします
- ベストアンサー
- JavaScript
jQuery Mobile　バージョン
jQuery Mobileでスマホサイトを作成しているのですが現在は <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> と言うソースを使っていたのですが http://www.buildinsider.net/web/jquerymobileref/24 を見たら、私と違いました。私のバージョンが古いのでしょうか？ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> へ書き換えたほうが良いのでしょうか？
- ベストアンサー
- CSS
Jqueryで画像タイトル表示させる
ギャラリーを作っていいるのですが、それぞれの画像ごとに説明文やタイトルを表示させたいのです。サムネイルクリック後に大きな画像を、そのしたに説明文・タイトルをそれぞれ同時に表示させる方法を教えてください。以下がソースになります。 (jQueryプラグインでサムネイルにフェードをかけています) ■HTML■ <!DOCTYPE html> <html> <head> <title>フォトギャラリーサンプル #01</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ $('a img').hover( function(){ $(this).fadeTo(200, 0.6); }, function(){ $(this).fadeTo(200, 1.0); } ); }); </script> </head> <body> <div id="wrapper"> <div class="image"> <div id="n1"><img src="big_01.jpg"title="aaaaaaaaaa/></div> <div id="n2"><img src="big_02.jpg" title="aaaaaaaaaa"/></div> </div> <div id="thum"> <ul> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> </ul> </div> </div> </body> </html> ■CSS■ #wrapper{ width:840px; border:solid #F00 1px; margin: 0 auto; padding: 0 40px; } .image { overflow: hidden; margin-top: 16px; width: 300px; height: 474px; border: 1px solid #ddd; float:left; } #thum{ margin-left: 310px; height:474px; } #thum img { border: #eee 2px solid; height:100px; width:100px; padding: 5px; margin-left: 7.5px; margin-bottom: 7px; float:left; } #thum li{ display:inline; list-style:none; } よろしくお願いします。
- 締切済み
- CSS