2018.07.04

「 jQuery」簡単にトップへ戻るをスクロールと固定する方法【Javascriptライブラリ】

カテゴリー：JavaScript

今回は jQueryでトップへ戻るを実装したいと思い、このブログに追加した方法をまとめです。トップへ戻る機能だけではなく、トップへ戻るボタンが一定のスクロールに応じてふわっと出てくるようにしてみました。

下準備

下準備はもちろん、jQueryの読み込みが必要です。

公式サイトからjQueryをダウンロードしてサーバーにアップロードしてから読み込む方法は下記の通りです。

アップロード後、<head>内に下記を追加して完了です。

<script src="/アップロード場所/jquery.min.js">

HTMLとCSSでトップへ戻るボタンを作成

HTMLはaタグを使用します。

<a href="#" class="le-btn-page-top">Top

次にCSS、HTMLに指定したclass「le-btn-page-top」に適用させていきます。

.le-btn-page-top {
  background-color: #000;
  border: 2px solid #000;
  border-radius: 50%;
  color: #ffffff;
  display: none;
  overflow: hidden;
  height: 48px;
  line-height: 48px;
  position: fixed;
  top: auto;
  bottom: 60px;
  right: 20px;
  left: auto;
  text-align: center;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  vertical-align: middle;
  width: 48px;
  z-index: 9999;
}

.le-btn-page-top:hover, 
.le-btn-page-top:active, 
.le-btn-page-top:focus {
  background-color: #fff;
  border: 2px solid #000;
  color: #000;
}

ここまでで丸のTopボタンが右下に表示されます。

このサイトでは、Top文言でなく、Font AwesomeのIconsを使用しています。

jQueryでトップへ戻るボタンをフワッと表示・非表示させる

トップへ戻るボタンの見た目作成できたので、jQueryでトップへ戻るボタンをフワッと表示・非表示させていきます。

$(function () {
  var pageTop = $('.us-btn-page-top');
  $(window).scroll(function () {
    if ($(this).scrollTop() > 200) {
      pageTop.stop(true, false).fadeIn();
    } else {
      pageTop.stop(true, false).fadeOut();
    }
  });
}

$(this).scrollTop()でスクロール距離を取得して、適当な数値ここでは「200」と比較して、fadeIn、fadeOutさせています。fadeIn、fadeOutさせる位置を調節するには「200」の数値を変更するとOKです。

高速でスクロールされると表示・非表示がちらついたり、スクロールが終わっているのに表示・非表示されたりするのを抑制するために、.stop(true, false)をfadeIn、fadeOutの前に設定しています。

これで、スクロールするとフワッと表示されます。

公式サイト:.scrollTop()の説明

公式サイト:.stop()の説明

jQueryでトップへ戻る

var flag = true;
  pageTop.on('click',function () {
    if (flag) {
      //ボタンを一旦無効に
      flag = false;
      jQuery('body, html').animate({scrollTop: 0}, 500,'swing', function () {
      //アニメーションが終わってからtrueにするように指定
        flag = true;
      });
      return false;
    }
  });

flagを指定して、animateが終了後にflagをtrueにすることでトップへ戻るボタンが連打された時にカクカクなるのを防げるようにしています。

jQueryでフワッと表示・非表示、トップへ戻るボタン

上記のコードを合わせて完成したコードが下記です。

$(function () {
  var pageTop = $('.us-btn-page-top');
  $(window).scroll(function () {
    if ($(this).scrollTop() > 200) {
      pageTop.stop(true, false).fadeIn();
    } else {
      pageTop.stop(true, false).fadeOut();
    }
  });
  var flag = true;
  pageTop.on('click',function () {
    if (flag) {
      //ボタンを一旦無効に
      flag = false;
      jQuery('body, html').animate({scrollTop: 0}, 500,'swing', function () {
      //アニメーションが終わってからtrueにするように指定
        flag = true;
      });
      return false;
    }
  });
}

これで完成です。ブログに少しずつ機能を追加していくのって結構面白いですよね。まだまだ完成までは遠いですが、この調子で色々カスタマイズをしていこうと思います。

LINE

「JavaScript」文字列のスペース・空白などを削除【trim】

タグ

jQuery