一定スクロールでフェードインする上に戻るボタン
このブログでも使用しています。
作動させるにはjQueryが必要です。
HTML
1 2 3 4 5 6 7 | <div class="scroll_top"> <div class="scropp_top_inner"> <a href="#"> <img src="<?php echo get_template_directory_uri(); ?>/img/common/icon_scroll.png" alt=""> </a> </div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .scroll_top{ position: fixed; right: 40px; bottom: 60px; z-index: 10; } .scropp_top_inner{ background: rgba(0, 0, 0, 0.5); border-radius: 5px; -webkit-transition: .3s; transition: .3s; } .scropp_top_inner:hover{ background: rgba(0, 0, 0, 0.8); -webkit-transition: .3s; transition: .3s; } |
Js(jQuery使用)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(function() { //.scroll_topを変数[topBtn]に入れる var topBtn = $('.scroll_top'); //topBtnはhide()にして見えないようにする topBtn.hide(); $(window).scroll(function () { //200pxスクロールしたらtopBtnをフェードイン表示させる if ($(this).scrollTop() > 200) { topBtn.fadeIn(); } else { //もし上にスクロールして200px未満になったらフェードアウトさせる topBtn.fadeOut(); } }); //topBtnをクリックしたらトップへスクロールする topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); |
