ふわっと登場！TOPへ戻るボタン

はじめに

サイトページの右下あたりにあるTOPへ戻るボタン。
クリックするとスルスルとページトップへ戻ってくれるボタンです。
ながーいページのLPやブログページでは欠かせない便利ボタンです。
今回はこのボタンの実装をご紹介します。

コード解説

まずはjQuery本体を読み込みます。
読み込み方法はコチラをご覧ください。
jQuery本体を読み込んでから以下のjsコードを入力します。

See the Pen Untitled by denet-tech (@denet-tech) on CodePen.

ご覧の通り「TOPへ戻る」ボタンは初期状態では表示されていません。
下へスクロールするとふわっと表示されます。
そして、TOPへ戻ると表示させる必要が無いので、ふわっと消えます。
コードを順番に見てみましょう。
上記ウィンドウの「HTML」「CSS」「JS」のボタンクリックで各ソースが表示されますのでご確認ください。

まずCSSからみていきましょう。
ボタンの位置を【 position: fixed; 】で固定しています。
そして、【 z-index: 99; 】でボタンをあらゆる要素の一番上に位置するよう設定しています。
こちらの設定がなかった場合、重なった要素に隠れてしまう場合があるので、z-indexの設定はしておきましょう。

次はjQueryを見ていきます。

pagetop.hide();

上記のコードで初期状態で非表示にしておいて、以下の条件でふわっと登場させています。

if ($(this).scrollTop() > 100) {
  pagetop.fadeIn();
} else {
  pagetop.fadeOut();
}

100px以上スクロールしたら 【 fadeIn() 】 でふわっと出現させています。
数字が少なくなればなるほどスクロールの距離は短くなります。
スクロールが100px以下の場合は【 fadeOut() 】でふわっと非表示になります。

$('body, html').animate({ scrollTop: 0 }, 500);

【 scrollTop: 0 】はスクロール位置を示しており、対象要素の一番上を指しています。
この場合、対象要素は【 body 】と【 html 】となり、つまりは画面の一番上となります。
【 ({ scrollTop: 0 }, 500) 】の500の単位はミリ秒です。
500ミリ秒で画面TOPまでスクロールします。
スクロールの速さをこちらの引数で指定します。

最期の行の以下のコードは何を表しているのでしょうか？

return false;

上記コードは、クリックイベントのデフォルトの動作をキャンセルするために使用されています。
通常、<a>要素がクリックされた場合、デフォルトの動作は対象のリンク先への遷移です。
しかし、【 return false; 】を返すことで、このデフォルトの動作がキャンセルされます。このようにして、ページがトップにスクロールされるだけでなく、通常のリンク先への遷移が防がれます。
このようにして、【 return false; 】はクリックによるデフォルトの挙動を抑制し、アニメーションだけが実行されるようにしています。

まとめ

$('body, html').animate({ scrollTop: 0 }, 500);

上記コードですが、こちらは画面のTOPへ戻るコードですが、画面TOPを表現するのなら、以下でもいけそうな気がします。

$(window).animate({ scrollTop: 0 }, 500);

しかし、実際はこちらのコードは動作しません。
【 animate 】メソッドは、jQueryオブジェクト要素に対してアニメーションを適用するものであり、【 window 】 オブジェクトは直接アニメーションをサポートしていません。
なぜなら、【 window 】 はJavaScript オブジェクトであり、jQuery オブジェクトではないためです。
そのため、【 $(‘body, html’) 】を使用します。
こちらの書き方はクロスブラウザの対応性があり、主流のブラウザで適切に動作します。
body または html のどちらがスクロール対象であっても、適切に動作するようになります。
クロスブラウザの問題とは、異なるウェブブラウザで同じコードが異なる動作をするか、または正しく機能しないことがある状況を指します。
最新のjQuery や主要なブラウザではほとんど問題が発生しなくなっていますが、ブラウザごとの標準や実装の違い、バグ、仕様の解釈の違いによって引き起こされることがあります。
バージョンの古いものをお使いの場合などは、影響がある場合がありますので気を付けましょう。
バージョンの違い、ブラウザの違い、OSの違いなどが動作に影響をもたらすことあることを念頭に作成しましょう。