スマホにのみページトップボタンを表示させるには

Question

ウインドウ幅が768px以下の場合にのみ、スクロールでフェードインするページトップボタンを付けたいです。
また、768pxより広い幅でページを開いた際も、横幅を768px以下に操作すればページトップボタンが表示される仕様にしたいです。

<a href="#" class="pagetop"><img src="img/pagetop.png" alt="ページトップへ"></a>

.pagetop {
  position: fixed;
  bottom: 20px;
  right: 0;
  z-index: 100;
  overflow: hidden;
  display: none;
  width: 40px;
  height: 40px;
}
  .pagetop:hover {
    background-color: #fff; }

$(window).on('load resize', function() {
  var w = $(window).width();
  var x = 769;
  if (w <= x) {
    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
      }, 400);
      return false;
    });
  }
});

上記で確認した場合、ウインドウ幅768px以下から幅を広げたときに、
.pagetopがdisplay:blockのままの状態になってしまいます。
どのように修正を加えれば良いでしょうか…。
何卒よろしくお願いします。

Answer 1

768pxより広い幅でページを開いた際も、横幅を768px以下に操作すればページトップボタンが表示される仕様にしたいです。

CSS メディアクエリで操作されては？

Comments

[tekumak]

ご回答ありがとうございます！
メディアクエリで769px以上はdisplay:noneになるよう記述するのも試したのですが、
スクロールするとフェードインする、というJSが効いてしまってdisplay:blockになってしまうようなのです…。

[m.ts10806]

「ウインドウ幅768px以下の場合は非表示」と1つ分岐を入れたら良いと思います。

[tekumak]

ご回答ありがとうございます。
JSに、ということで合ってますか？
下記の通りelse以下を追加してみましたが、改善されませんでした。
もう少し調べてみます。
$(window).on('load resize', function() {
var w = $(window).width();
var x = 769;
if (w <= x) {
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
}, 400);
return false;
});
} else {
$(function(){
$('.pagetop').hide();
});
}
});

[m.ts10806]

下記を追加するだけで良いかなと。
if(w < x){
$('.pagetop').hide();
return;
}

[tekumak]

いただいた内容を参考に、下記で理想通りの動きになりました！
ありがとうございます！
$(window).on('load resize', function () {
var w = $(window).width();
var x = 769;
if (w <= x) {
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
}, 400);
return false;
});
} else {
$('.pagetop').hide();
return;
}
});