おしえて

スマフォではボタンを表示させたくない

解決済

質問者：エビゾー
質問日時：2023/01/20 14:26
回答数：2件

HTML/CSS/Javascriptを利用してボタンを表示さています。
スマフォの場合、ボタンを表示させたくなく、どうにかJSを修正してみたのですが、ページ読み込み時に一瞬だけボタンが表示されます。
完璧に表示されなくする為にはどのようにJSを修正したらよろしいでしょうか。
恐縮ではございますがどなたかお願いいたします。

■HTML
<p id="page-top"><a href="index.html#top">PAGE TOP</a></p>

■CSS
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #e94609;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
border: 1px solid white;
}
#page-top a:hover {
text-decoration: none;
background: #ee8a66;
}

Javascriptをどうにか修正しようとしています。

■下記、WEBで検索して見つかったもの

$(function() {
var showFlag = false;
var topBtn = $('#page-top');
topBtn.css('bottom', '-100px');
var showFlag = false;
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
if (showFlag == false) {
showFlag = true;
topBtn.stop().animate({'bottom' : '20px'}, 200);
}
} else {
if (showFlag) {
showFlag = false;
topBtn.stop().animate({'bottom' : '-100px'}, 200);
}
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});

■修正後
$(function() {
var showFlag = false;
var topBtn = $('#page-top');
if (window.matchMedia('(max-width: 767px)').matches) {
topBtn.hide();
}
topBtn.css('bottom', '-100px');
var showFlag = false;
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
if (showFlag == false) {
showFlag = true;
topBtn.stop().animate({'bottom' : '20px'}, 200);
}
} else {
if (showFlag) {
showFlag = false;
topBtn.stop().animate({'bottom' : '-100px'}, 200);
}
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});