「PageTopへ戻る」ボタンを１ステップで実装してみる
皆さんのブログ記事を見ていて、よく目にする「PageTopへ戻る」ボタン
あれ、いいなぁ～と思いながら、いつも指をくわえて見ていたので、今回は自分のブログにも実装してみたいと思います。
最速かもしれない（←ぇ）１ステップで、実装までを実現してみます。
目次
Step.1 HTMLへの記載（jQuery読込み、JavaScript記述、ボタン用画像の設定とCSSの設定）
下記をHTML編集モードの本文にコピペします。（HTML内の<body>～</body>にあたります）
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 500) { //ボタンを出現させるスクロール位置をpxで指定
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 300); //完了までの時間をミリ秒単位で指定
return false;
});
});
</script>
<p id="page-top" style="position: fixed;bottom: 5px;right: 10px;cursor : pointer;z-index: 99;" hidden>
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kouten0430/20171208/20171208181157.png">
</p>これで実装完了！（このページの「PageTop」ボタンが、上記で実装したものです）
赤字の箇所は、お好みで変更して下さい。上から順に説明します。
- 「1.12.4」：jQueryのバージョンです
- 「500」：ページ上端からスクロールしていって、PageTopボタンが出現するまでのピクセル数です
- 「300」：PageTopボタンを押してページ上端に到達するまでの時間（ミリ秒）です
- 「5px」：bottom 画面下からの距離を指定する
- 「10px」：right 画面右からの距離を指定する
- 「HTTP://～」：ボタンに使用する画像のURLです（上記は、はてなフォトライフのURLです）
なお、<body>～</body>内へのコピペであれば、記事ごとにPageTopボタンが配置されます。
<head>要素にコピペすると、はてなブログの場合、全記事（過去記事含む）にPageTopボタンが配置されます。
補足説明
コードの上から順に補足説明します。
- <script src="">：jQueryをロードしている部分です。
- <script>：メインプログラムのJavaScript（jQueryの文法で）を記述している部分です。
- id=""：JavaScriptが制御する要素を指定しています。id名は任意。
- style=""：ボタン位置もろもろを指定するCSSです。1Stepで実装するために、あえてインラインスタイルにしました。
- position：要素の位置を指定します（fixedでは画面を基準にし、下からの位置、右からの位置などを指定します）
- pointer：画像を選択した時に、カーソルが指の形になるようにしています。
- z-index：重なり順序を指定しています。値が大きい要素ほど前面にきます。
- hidden：JavaScriptが読み込まれて実行されるまでの画像のチラ映りを防止します。
- <img src="">：文字の代わりに画像を指定しています。
※はてなフォトライフにアップロードした画像は、画像を右クリックでURLを取得できます。
なお、jQueryやjQueryを使ったJavaScriptの記述については、専門書や専門のサイトを参照してくださいませ(;^_^A
ではでは。
Milkさんの記事を参考にさせていただきました！
Illustrated by 霜山 シモンさま
