【jQuery】スマホ時にトップへ戻るボタンの表示非表示が一瞬チラつく場合の対処法

2017年11月1日

スクロールして一定の位置まで行くと、トップへ戻るボタンをfadeInで表示するという実装をすることがあるかと思いますが、その際にスマホ実機で確認をするとトップへ戻った瞬間にボタンが消えたり表示されたり（表示非表示）を繰り返すことがあるかと思うのですが、そんな時の簡単な解決方法をご紹介します！

スポンサードサーチ

結論からいいます

表示非表示の切り替えにfadeIn・fadeOutを使わず、addClass、removeClassでクラスを操作してopacityで切り替える、です。
では、コードを下記に記載しますの参考にでもなれば幸いです。

ちなみに、transitionプロパティを使うことで表示非表示のタイミングを調整できるのでぜひそちらもお使いください。

html

<div class="btn-pagetop">
<a href="#">トップへ戻るボタン</a>
</div>

<a href="#">トップへ戻るボタン</a>

</div>

スポンサードサーチ

css

.btn-pagetop {
opacity: 0;
position: fixed;
z-index: 10;
right: 30px;
bottom: 50px;
width: 50px;
transition: all .7s;
pointer-events: none;
}
.pageTopBtn-in {
opacity: 1;
pointer-events: auto;
}

.btn-pagetop {

opacity: 0;

position: fixed;

z-index: 10;

right: 30px;

bottom: 50px;

width: 50px;

transition: all .7s;

pointer-events: none;

}

.pageTopBtn-in {

opacity: 1;

pointer-events: auto;

}

js

$('a[href^=#]').click(function() {
var speed = 500; // ミリ秒
var val = $(window).scrollTop();
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').stop().animate({scrollTop:position}, speed, 'swing');
return false;
});
var pageTopBtn = function(){
var $pageTopBtn = $('.btn-pagetop');
$(window).on('scroll', function(){
$scrollPosition = $(window).scrollTop();
if($scrollPosition > 0){
$pageTopBtn.addClass('pageTopBtn-in');
}else{
$pageTopBtn.removeClass('pageTopBtn-in');
}
});
}();