jQuery | 下からにょきっと出てくる「トップへ戻る」ボタン

css/コーディング

縦長のページでよくある「トップへ戻る」ボタン。

参考になるコードはたくさんあるけど、書いてあるコードの意味がちょっとわからなかったり、

実装してみたけど「なんか挙動が違う・・・」

みたいなことがあったので、つまづきポイントと共に覚書。

下からスライドして登場する「トップへ戻る」

See the Pen
トップへもどるボタンが下からにょきっと
by hiro (@hiro555)
on CodePen.

スクロールで一定まで下がるとしゅるっと出てきます。

上にあがるとまた消えます。

基本のコード

HTMLやCSSはとくに変わったことはありませんが、「トップへ戻る」ボタンを

position: fixed;
bottom: -50px;

で画面下に隠しておくという下準備がポイントです。

そしてjQueryはこんな感じです。

 $(function(){
 let topBtn = $('#topBtn');

 $(window).scroll(function () {
   //スクロールトップの位置を変数に格納
   let now = $(window).scrollTop() ;
   //もしスクロールトップが300px以上なら
   if(now > 300) {
   //「トップへ戻るボタン」を0.3秒のアニメーションでbottom30pxへ移動
    topBtn.stop().animate({'bottom': '30px' }, 300);
   } else if (now <= 300) {
   //300px以下ならbottom-50pxの位置へ0.3秒のアニメーションで戻す
    topBtn.stop().animate({'bottom': '-50px' }, 300);
   }
   });
   //クリックされたら0.5秒のアニメーションでトップへ戻る
   topBtn.click(function () {
     $('body, html').animate({ scrollTop: 0 }, 500);
     return false;
  });
});

stop()について

上記のコードで思うような挙動になるのですが、

stop()関数があるのと無いのとでは挙動に大きな違いがあります。

最初stop()を省いてしまい、かなり回り道をしました・・・

stop()関数は、今実行されているアニメーションをストップさせる働きがあるそうです。

:not(:animated)とどう違うのか?はこちらのサイト様がわかりやすかったです!
NOT(“:ANIMATED”)とSTOP()の使い分けについて

 

stop()がないと具体的にどうなるのか?というと、トップへ戻るボタンの動きがすごく遅くなります。

スクロールしても出なくて、待って、やっとぴょこっと出てくる。

そんな感じの挙動になります。待ってられん!!

参考サイト様

また、別のサイト様で見かけた

初心者でも分かる!jQuery「TOPへ戻るボタン」の作り方
の中にある「過剰な処理を防ごう」という項は大変興味深かったです。

状態判定をはさむことで、「スクロールごとの重ねがけ」を防ぐという考え方。

私自身あとで読み返したいので、めもめも。

スクロールすると出てくる「トップへ戻る」ボタンの作り方

ちなみに今回のjQueryのコードは上記サイト様からお借りしました。

こちらのコードのstop()の重要性がわからなかったので省いたところつまづいた、という流れです^^;

状態を変数に格納して判定するコードも含まれている(私は今回省いています)ので、もしかしたらそれも重ねがけを防ぐということなのかな・・・??

うーん、難しい!!

タイトルとURLをコピーしました