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

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

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

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

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

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

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

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) {
　　　//３００px以下ならbottom-50pxの位置へ0.3秒のアニメーションで戻す
　　　　topBtn.stop().animate({'bottom': '-50px' }, 300);
　　　}
　　　});
　　　//クリックされたら0.５秒のアニメーションでトップへ戻る
　　　topBtn.click(function () {
　　　　　$('body, html').animate({ scrollTop: 0 }, 500);
　　　　　return false;
　　});
});