レスポンシブデザイン スマホで非表示にしたい

質問

レスポンシブデザインのサイトを制作していて質問です。

今現在PC表示でページを下にスクロールするとページトップへ戻るボタンが右下に出現するように制作しております。

このボタンをスマートフォンやタブレットで表示した際に出現しないようにする方法はありませんでしょうか？

html-------------------------

<p id="page-top"><a href="#wrap"><img src="" alt=""　height="" width=""></a></p>

css--------------------------

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
}

script------------------------

$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});

上記のように制作しています。
よろしくお願いします。

回答No.4

outbrave

レスポンシブだから、スタイルシートで分けておられると思います。

@import url(style.css) screen and (min-width: 1000px);
@import url(tablet.css) screen and (max-width: 999px);
@import url(smart.css) screen and (max-width: 768px);

min-widthやmax-widthの値はまちまちですが、表示したくないスタイルシートのファイルで

#page-top {
display: none;
}

これで表示されなくなるはずです。

お礼

ご解答ありがとうございます。

試してみましたがやはり消えてくれませんでした・・
jsをリンクさせずに試すと消えてくれました。

cssで非表示でもjsで表示されてしまうようです。

jsは残しつつという方法を考えておりますので対応策がありましたらご教授ください。

回答No.3

iewmmxnb99bb63

ちょうど今日同じようなことやったので。

var desupurei = screen.availWidth;
if(desupurei > 959) {
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
} else {
$('#page-top').css('display', 'none');
}

見たいな感じでしょうか。
あとメディアクエリという方法とphpでの判別方法もあります。
これらは必要に応じて使い分けるといいとおもいます。

補足

ご解答ありがとうございます。

上記で試してみたのですがトップへ戻るボタンが表示されてしまいます。

確認方法が悪いのでしょうか。
今はローカルでIEで表示して画面サイズを狭めたり、広げたり、更新したりしていますがやはり消えてくれません・・

回答No.2

iewmmxnb99bb63

あっこちらのほうが確実かも

if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0
|| navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
$('#page-top').css('display', 'none');
} else {

//以下質問にかかれてたｊｓ
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
//質問にかかれてたjsここまで
}

お礼

ありがとうございます！

ディスプレイサイズでも振り分け可能とのことですが、具体的に959px以下のデバイスについて非表示にする方法を教えていただけないでしょうか。
js初心者で、無知で申し訳ありません。

よろしくお願いします。

回答No.1

iewmmxnb99bb63

こんにちは。

-------------------------------
if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0
|| navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {

} else {

//以下質問にかかれてたｊｓ
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
//質問にかかれてたjsここまで
}

----------------------------------

見たいな感じでどうでしょう。

上記はデバイスで振り分けています。
ディスプレイサイズでも振り分け可能です。
サーバサイドのphpという言語でもこれらの処理は可能だったと思います。

参考になれば幸いです。

お礼

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