プログラミング初心者です。
現在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 Pゴシック", "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}