【iOS版アプリ】不具合のお知らせ

トップに戻るのボタンを設置しましたが、スマホだと表示されません。
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>

gooドクター

A 回答 (1件)

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



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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング