[ 勉強 ] スクロールしたら「トップへ戻るボタン」を表示するjQuery

人様のソースコードを読み解くシリーズです。今回もいつも参考にさせてもらっているwebOpixelさんのブログから。

今回は5回にわたって勉強してみようと思います。

1.ちょっとスクロールしたら「トップへ戻るボタン」を表示

最初のは以前やったとほぼおなじなので割愛。

『スライドアニメーションして表示』というのを見てみます。

Java Script

$(function() {
   var showFlag = false;
   var topBtn = $('#page-top');
   topBtn.css('bottom', '-100px');
   var showFlag = false;
   //スクロールが100に達したらボタン表示
   $(window).scroll(function () {
      if ($(this).scrollTop() > 100) {
         if (showFlag == false) {
            showFlag = true;
            topBtn.stop().animate({'bottom' : '20px'}, 200);
         }
      } else {
         if (showFlag) {
            showFlag = false;
            topBtn.stop().animate({'bottom' : '-100px'}, 200);
         }
      }
   });
   //スクロールしてトップ
   topBtn.click(function () {
      $('body,html').animate({
         scrollTop: 0
      }, 500);
      return false;
   });
});

なんで『フラグ(showFlag)』を入れているのだろう?と思って、フラグなしで動作確認してみたら、ボタンがきれいにスライドアップしないんですね。なんでだろう。不思議。

Java Script

$(function() {
   var topBtn = $('#page-top');
   topBtn.css('bottom', '-100px');
   //スクロールが100に達したらボタン表示
   $(window).scroll(function () {
      if ($(this).scrollTop() > 100) {
         topBtn.stop().animate({'bottom' : '20px'}, 200);
      } else {
         topBtn.stop().animate({'bottom' : '-100px'}, 200);
      }
   });
   //スクロールしてトップ
   topBtn.click(function () {
      $('body,html').animate({
         scrollTop: 0
      }, 500);
      return false;
   });
});

どうしてなのか考えてみたんですけど、恐らく、スクロールしている最中にアニメーションが連続して何度も実行されてしまうため、きれいにアニメーションできないのだと思います。

ということはですよね、要はアニメーションしているときは再度アニメーションしないようにすればよいわけです。これは、(『.stop()』の代わりに『.not(‘:animated’)』を使えばよいのではないでしょうか。

Java Script

$(function() {
   var topBtn = $('#page-top');
   topBtn.css('bottom', '-100px');
   $(window).scroll(function () {
      if ($(this).scrollTop() > 100) {
         topBtn.not(':animated').animate({'bottom' : '20px'}, 200);
      } else {
         topBtn.not(':animated').animate({'bottom' : '-100px'}, 200);
      }
   });
   //スクロールしてトップ
   topBtn.click(function () {
      $('body,html').animate({
         scrollTop: 0
      }, 500);
      return false;
   });
});

うまくいきました!