縦長のページでよくある「トップへ戻る」ボタン。
参考になるコードはたくさんあるけど、書いてあるコードの意味がちょっとわからなかったり、
実装してみたけど「なんか挙動が違う・・・」
みたいなことがあったので、つまづきポイントと共に覚書。
下からスライドして登場する「トップへ戻る」
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”)とSTOP()の使い分けについて

stop()がないと具体的にどうなるのか?というと、トップへ戻るボタンの動きがすごく遅くなります。
スクロールしても出なくて、待って、やっとぴょこっと出てくる。
そんな感じの挙動になります。待ってられん!!
参考サイト様
また、別のサイト様で見かけた
初心者でも分かる!jQuery「TOPへ戻るボタン」の作り方
の中にある「過剰な処理を防ごう」という項は大変興味深かったです。
状態判定をはさむことで、「スクロールごとの重ねがけ」を防ぐという考え方。
私自身あとで読み返したいので、めもめも。
ちなみに今回のjQueryのコードは上記サイト様からお借りしました。
こちらのコードのstop()の重要性がわからなかったので省いたところつまづいた、という流れです^^;
状態を変数に格納して判定するコードも含まれている(私は今回省いています)ので、もしかしたらそれも重ねがけを防ぐということなのかな・・・??
うーん、難しい!!