ウインドウ幅が768px以下の場合にのみ、スクロールでフェードインするページトップボタンを付けたいです。
また、768pxより広い幅でページを開いた際も、横幅を768px以下に操作すればページトップボタンが表示される仕様にしたいです。
html
1<a href="#" class="pagetop"><img src="img/pagetop.png" alt="ページトップへ"></a>
css
1.pagetop { 2 position: fixed; 3 bottom: 20px; 4 right: 0; 5 z-index: 100; 6 overflow: hidden; 7 display: none; 8 width: 40px; 9 height: 40px; 10} 11 .pagetop:hover { 12 background-color: #fff; }
javascript
1$(window).on('load resize', function() { 2 var w = $(window).width(); 3 var x = 769; 4 if (w <= x) { 5 var pagetop = $('.pagetop'); 6 pagetop.hide(); 7 $(window).scroll(function () { 8 if ($(this).scrollTop() > 100) { 9 pagetop.fadeIn(); 10 } else { 11 pagetop.fadeOut(); 12 } 13 }); 14 pagetop.click(function () { 15 $('body,html').animate({ 16 scrollTop: 0 17 }, 400); 18 return false; 19 }); 20 } 21});
上記で確認した場合、ウインドウ幅768px以下から幅を広げたときに、
.pagetopがdisplay:blockのままの状態になってしまいます。
どのように修正を加えれば良いでしょうか…。
何卒よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/22 08:15
2019/07/22 08:31 編集
2019/07/22 08:47
2019/07/22 08:50
2019/07/22 09:34 編集