こちらも毎回検索して実装しているので、覚書としてメモします。
よくWebサイトでキービジュアルをスクロールして少し抜けたくらいのところで、
「TOPへ」ボタンを表示させたいことがあります。
その実装
//html
<div class=”totop”>
<a href=”#”>
<img src=”” alt=”TOPへ”>
</a>
</div>
//css
.totop{
position: fixed;
bottom: 30px;
right: 30px;
z-index: 100;
opacity: 0;
transition: all 0.3s;
}
.totop.show{
opacity: 1;
}
//JavaScript
var topBtn = jQuery('.totop');
// topBtn.hide();
//スクロールが900に達したらボタン表示
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > 900) {
topBtn.addClass("show");
} else {
topBtn.removeClass("show");
}
});
})
コメント