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;
});
});
No.2ベストアンサー
- 回答日時:
考え方が逆じゃないかな。
「スマホでなければボタンを表示するようにする」
(`・ω・´) だろう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スマフォではボタンを表示させ...
-
翌月を取得するGASが分かりません
-
なぜmatchメソッドがエラーにな...
-
イラレでナンバリングする方法
-
GASでGoogleフォームの自動返信...
-
C#OpenCv V4にのエラーに関する...
-
var exports = exports || {}; ...
-
ローカルにあるファイルを検索...
-
vb.netでの記述方法について 以...
-
ページの先頭へスクロールして...
-
【JavaScript】数当てゲームを...
-
C# 演算 奇数と偶数 表現の仕方
-
google apps scriptの終了のさせ方
-
javascriptでiframeのURL変更は?
-
GASでundefinedエラーが出ます
-
gas 日付けの加算
-
GASのエラー「undefined からプ...
-
1日1回だけ引けるjavascriptお...
-
ASP.NETのコントロールの値をJa...
-
jsによって検索プルダウン、都...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
HTMLで作った時報アプリが動き...
-
javascriptでテーブルに追加し...
-
html javascript リンク先アド...
-
【西暦等の変換】
-
ローカルにあるファイルを検索...
-
ASP.NETのコントロールの値をJa...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
ASP.NET MVCでObjectをjsに渡す
-
カンマで終わってるのはセミコ...
-
JavaScriptで文字列の特定文字...
-
javascriptでiframeのURL変更は?
-
APIを使って埋め込んだグーグル...
おすすめ情報