一定スクロールでフェードインする上に戻るボタン
このブログでも使用しています。
作動させるにはjQueryが必要です。
HTML
<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
.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使用)
$(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;
});
});
