プログラミング初心者です。
現在WEBサイトの制作しておりますが、「ページトップへ戻る」動作をスクロール途中でフェードインしてくるようにJQueryで記述しています。
下記のような記述でPCブラウザだと正常に動作しますが、
スマホ端末(iOS9.2)だとページ下部へ固定されており、途中でフェードインしなくなってしまいます。
色々調べてみましたが、javascriptが問題なのか、cssが問題なのか要因がわかりません。
初歩的なことで申し訳ございませんが、どなたか詳しい方お教えいただけますでしょうか。
（同サイト内にはslidebars.min.jsも使用していますので、そちらも合わせてタグ記載をしております）
よろしくお願い致します。
※javascriptも含む
※jqueryは1.10.2を使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 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="../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>
</head>
<body id="nw_sp">
<div id="sb-site">
<div id="footer">
<p class="pagetop"><a href="#tg_top"><img src="../img/btn_pagetop.png" /><span class="disnon">ページTOPへ戻る</span></a></p>
</div>
</div>
<script type="text/javascript">
$(function() {
var pageTop = $('.pagetop');
pageTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
pageTop.click(function () {
$('body, html').animate({scrollTop:0}, 500, 'swing');
return false;
});
});
</script>
</body>
</html>/* formatting style
--------------------------*/
* {
font-style: normal;
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
line-height: 2.0;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Century Gothic, sans-serif;
color: #000;
margin:auto;
background-color:none repeat scroll 0% 0% #FFF;
position:relative;
letter-spacing:0.8px;
}
/* basic layout
--------------------------*/
#footer{
width:100%;
overflow:hidden;
text-align:center;
}
/*pagetop--------------------------*/
.pagetop {
position: fixed;
display:block;
bottom: 92px;
right: 10px;
width:40px;
height:40px;
}
.pagetop img{
width:40px;
display:block;
}
.pagetop a:hover {
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter:"alpha( opacity=70 )";
background-color: #ccc;
}-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
0
初めまして。
スマフォの場合PCブラウザと仕様が異なるためPCブラウザとは別にCSS等を用意しなくてはいけないんです。
ただ新たに作成するのが面倒かと思います。今後WEBサイトを作り続けるようならまずbootstrapを使用してみてください。お望みの機能もJQueryを駆使すれば実装できますよ！
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
jQuery(1.11.0)<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>での確認を前提としてですが、以下の記述を追加すれば、希望されるような動きを実現できました。
.pagetop {
position: fixed;
bottom:0;
left:0;
}投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
Jquery-mobileを使うなら
<script type="text/javascript" src="../js/slidebars.min.js"></script>の下に
<script src="jquery.mobile-1.*.*.min.js"></script>
と入れて
<div id="sb-site">
<div data-role="footer" id="footer" data-position="fixed"> ←一番下に固定ではなくなります
<p class="pagetop"><a href="#tg_top"><span class="disnon">ページTOPへ戻る</span></a><br></p>
</div>
</div>
ios9.2.1で確認
使わないなら#footerにposition="absolute"とか？
jquery.mobile-1.4.5で確認
jquery.mobile-1.2.0では動かない
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 89.99%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
Lhankor_Mhy
2016/01/20 19:36
レスポンシブデザインを採用しているような気がしますので、ご掲示されていない部分のコードに原因がある予感がします。モバイル端末メディアクエリでのCSSをご提示いただくか、モバイル端末表示時に適用されているスタイルをご提示いただくといいかもしれません。
y.shima41
2016/01/21 16:58
ご指摘いただきまして、ありがとうございます。
こちらのサイトはレスポンシブデザインにはしておりませんが、問題箇所のタグはPC端末用ページも同様の記述をしており、そちらは各ブラウザ問題なく動作しております。
html/css共に基本設定の箇所を追記してみましたが、こちらで大丈夫でしょうか。どうぞよろしくお願い致します。