【JQuery】ページトップへ戻るがスマホで動作しない原因は…？

プログラミング初心者です。
現在WEBサイトの制作しておりますが、「ページトップへ戻る」動作をスクロール途中でフェードインしてくるようにJQueryで記述しています。

下記のような記述でPCブラウザだと正常に動作しますが、
スマホ端末(iOS9.2)だとページ下部へ固定されており、途中でフェードインしなくなってしまいます。

色々調べてみましたが、javascriptが問題なのか、cssが問題なのか要因がわかりません。
初歩的なことで申し訳ございませんが、どなたか詳しい方お教えいただけますでしょうか。
（同サイト内にはslidebars.min.jsも使用していますので、そちらも合わせてタグ記載をしております）

よろしくお願い致します。

HTML
1※javascriptも含む
2※jqueryは1.10.2を使用
3
4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
9<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
10<link rel="stylesheet" href="../css/slidebars.css" />
11<script type="text/javascript" src="../js/jquery.min.js"></script>
12<script type="text/javascript" src="../js/slidebars.min.js"></script>
13 </head>
14
15<body id="nw_sp">
16<div id="sb-site">
17
18<div id="footer">
19<p class="pagetop"><a href="#tg_top"><img src="../img/btn_pagetop.png" /><span class="disnon">ページTOPへ戻る</span></a></p>
20</div>
21</div>
22
23 <script type="text/javascript">
24 $(function() {
25 var pageTop = $('.pagetop');
26 pageTop.hide();
27 $(window).scroll(function () {
28 if ($(this).scrollTop() > 100) {
29 pageTop.fadeIn();
30 } else {
31 pageTop.fadeOut();
32 }
33 });
34 pageTop.click(function () {
35 $('body, html').animate({scrollTop:0}, 500, 'swing');
36 return false;
37 });
38 });
39 </script>
40 </body>
41 </html>

CSS
1/* formatting style
2--------------------------*/
3* {
4	font-style: normal;
5	margin: 0px;
6	padding: 0px;
7}
8
9body {
10	font-size: 12px;
11	line-height: 2.0;
12	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Century Gothic, sans-serif;
13	color: #000;
14	margin:auto;
15	background-color:none repeat scroll 0% 0% #FFF;
16	position:relative;
17	letter-spacing:0.8px;
18}
19
20/* basic layout
21--------------------------*/
22
23#footer{
24	width:100%;
25	overflow:hidden;
26	text-align:center;
27}
28
29
30/*pagetop--------------------------*/
31
32.pagetop {
33    position: fixed;
34	display:block;
35    bottom: 92px;
36    right: 10px;
37	width:40px;
38	height:40px;
39}
40
41.pagetop img{
42	width:40px;
43	display:block;
44}
45
46 
47.pagetop a:hover {
48	opacity:0.7;
49	filter:alpha(opacity=70);
50	-ms-filter:"alpha( opacity=70 )";
51    background-color: #ccc;
52}

Lhankor_Mhy

2016/01/20 10:36

レスポンシブデザインを採用しているような気がしますので、ご掲示されていない部分のコードに原因がある予感がします。モバイル端末メディアクエリでのCSSをご提示いただくか、モバイル端末表示時に適用されているスタイルをご提示いただくといいかもしれません。

退会済みユーザー

2016/01/21 07:58

ご指摘いただきまして、ありがとうございます。こちらのサイトはレスポンシブデザインにはしておりませんが、問題箇所のタグはPC端末用ページも同様の記述をしており、そちらは各ブラウザ問題なく動作しております。 html/css共に基本設定の箇所を追記してみましたが、こちらで大丈夫でしょうか。どうぞよろしくお願い致します。

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

回答3件

Jquery-mobileを使うなら

html
1<script type="text/javascript" src="../js/slidebars.min.js"></script>の下に
2<script src="jquery.mobile-1.*.*.min.js"></script>

と入れて

html
1 <div id="sb-site">
2  <div data-role="footer" id="footer" data-position="fixed"> ←一番下に固定ではなくなります
3   <p class="pagetop"><a href="#tg_top"><span class="disnon">ページTOPへ戻る</span></a><br></p>
4  </div>
5 </div>

ios9.2.1で確認
使わないなら#footerにposition="absolute"とか？
jquery.mobile-1.4.5で確認
jquery.mobile-1.2.0では動かない

投稿2016/02/27 12:05

編集2016/02/27 12:20

退会済みユーザー

総合スコア0

jQuery(1.11.0)<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>での確認を前提としてですが、以下の記述を追加すれば、希望されるような動きを実現できました。

css
1.pagetop {
2  position: fixed;
3  bottom:0;
4  left:0;
5}

投稿2016/01/31 15:42

k_fujimoto

総合スコア181

退会済みユーザー

2016/02/05 10:00

返答が遅くなりまして、申し訳ございません。回答いただきまして、ありがとうございます。回答いただきました記述にて修正しましたが、やはり動作しませんでした。。。同ページで使用している他のjQueryやCSSで不備があるのかもしれません。せっかくお答えいただきましたのに、申し訳ございません。

k_fujimoto

2016/02/06 06:18

なるほど。。たしかにここらへんのcssとjs読み込んでいなかったので、そのあたりの問題ですね。。 <link rel="stylesheet" href="../css/jquery.mobile.min.css" /> <link rel="stylesheet" href="../css/slidebars.css" /> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/slidebars.min.js"></script>

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

初めまして。
スマフォの場合PCブラウザと仕様が異なるためPCブラウザとは別にCSS等を用意しなくてはいけないんです。
ただ新たに作成するのが面倒かと思います。今後WEBサイトを作り続けるようならまずbootstrapを使用してみてください。お望みの機能もJQueryを駆使すれば実装できますよ！

投稿2016/01/27 03:26