ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

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

2017年11月1日
pagetop

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

結論からいいます

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

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

スポンサードサーチ

html

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

css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('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');
}
});
}();

関連記事

  • Uncaught Error: Syntax error, unrecognized expression: a[href^=#]エラーの解決方法!2017年11月3日 Uncaught Error: Syntax error, unrecognized expression: a[href^=#]エラーの解決方法!
  • 【jQuery】スライドショーとポップアップ(モーダル)を両方使用し、作成したサンプル2017年11月11日 【jQuery】スライドショーとポップアップ(モーダル)を両方使用し、作成したサンプル
  • 【jQuery】簡単プラグイン不要!高さを揃えるjsを実装する方法2018年5月12日 【jQuery】簡単プラグイン不要!高さを揃えるjsを実装する方法
  • 【AMP】「logo」フィールドの値は必須です。「image」フィールドの値は必須です。構造化テストツールエラーの解決法2018年5月11日 【AMP】「logo」フィールドの値は必須です。「image」フィールドの値は必須です。構造化テストツールエラーの解決法
  • 【jQuery】ファーストビュー(画面全体)に背景画像をスライダーで表示させる方法(prev , next , ページャー付き)2017年11月10日 【jQuery】ファーストビュー(画面全体)に背景画像をスライダーで表示させる方法(prev , next , ページャー付き)

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.