スマートフォン用のページで、
スクロールしたらトップへ戻るボタンをフェードインで表示させたいのですが、
何度試しても表示されずうまくいきません。
Chromeの開発者ツールでもエラーが出ず、原因がまったくさっぱりです。。。
記述は下記の通りです。
html
1<p id="page-top"><a href="#wrap" class="arrow sample5-5"></a></p>
css
1#page-top { 2 position: fixed; 3 bottom: 30px; 4 right: 30px; 5} 6 7.arrow{ 8position: relative; 9display: inline-block; 10padding: 0 5% 25% 10%; 11color: #fff; 12vertical-align: middle; 13text-decoration: none; 14} 15.arrow::before, 16.arrow::after{ 17position: absolute; 18top: 0; 19bottom: 50px; 20left: -56px; 21margin: auto; 22content: ""; 23vertical-align: middle; 24} 25 26.sample5-5::before{ 27width: 50px; 28height: 50px; 29background: #333; 30opacity: 0.7; 31-webkit-border-radius: 25%; 32border-radius: 25%; 33position: absolute; 34right: 5%; 35} 36.sample5-5::after{ 37top: 8%; 38width: 15px; 39height: 15px; 40border-top: 4px solid #fff; 41border-right: 4px solid #fff; 42-webkit-transform: rotate(-45deg); 43transform: rotate(-45deg); 44position: absolute; 45right: 0; 46} 47
javascript
1<script type="text/javascript"> 2//初期は非表示 3$("#page-top").hide(); 4 5$(function () { 6 $(window).scroll(function () { 7 //1000pxスクロールしたら 8 if ($(this).scrollTop() > 1000) { 9 //フェードインで表示 10 $('#page-top').fadeIn(); 11 } else { 12 $('#page-top').fadeOut(); 13 } 14 }); 15 //ここからクリックイベント 16 $('#page-top a').click(function () { 17 $('body,html').animate({ 18 scrollTop: 0 19 }, 500); 20 return false; 21 }); 22}); 23</script>
ちなみにヘッダーを<div id="wrap"></div>
で囲っております。
よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/17 07:18 編集
2016/10/17 07:43
2016/10/17 07:53
2016/10/17 08:53
2016/10/18 04:14
2016/10/18 04:43
2016/10/21 00:12