トップに戻るボタン、スマホだと表示されない

トップに戻るのボタンを設置しましたが、スマホだと表示されません。
PCでもウインドウの幅を狭めると消えますので、ウインドウサイズに対して何か指定がいるのかもしれませんが、そのへんの設定がよくわかりません。

CSSとHTMLは下記です。
わかる方ご教授ください。


CSS

#page_top{
width: 100px;
height: 100px;
position: fixed;
right: 100px;
bottom: 100px;
background: #DE2C58;
opacity: 0.6;
border-radius: 50%;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_top a::before{
font-family: FontAwesome;
content: '\f0d8';
font-size: 50px;
color: #fff;
position: absolute;
width: 100px;
height: 50px;
top: 60px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}


HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7 … rel="stylesheet" >
<div id="page_top"><a href="#"></a></div>

<script>
$(function() {
var pagetop = $('#page_top');
pagetop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { //100pxスクロールしたら表示
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
$('a[href^="#"]').click(function(){
var time = 500;
var href= $(this).attr("href");
var target = $(href == "#" ? 'html' : href);
var distance = target.offset().top;
$("html, body").animate({scrollTop:distance}, time, "swing");
return false;
});
});
</script>

No.1 回答者： t_fumiaki 回答日時： 2021/03/27 13:17

PCでウインドウの幅を狭めても消えないよ。

1行目の<link・・・はhead内に書いて有ると思うけど、そこで参照しているCSSと何かが競合してるんじゃ無いですか？？？