こんにちは。とむじぃです。Topへ戻るボタンの実装を紹介します！
そろそろ記事数も増えてきて、概要だけでなく全文表示にしておくと、ページのボリュームが・・・
記事の下の方に行けば行くほど上に戻るのが面倒で、これではユーザーさんに良くないと思ったあなた！
ページの一番上まで戻る機能を実装してみましょう♪
スポンサーリンク
プラグインかjQueryか
何か面倒くさそうな難しそうな言葉が並びましたが、
プラグインはWordPressを利用している方なら抵抗は無いと思います。
簡単に言うと”これをインストールして有効化すればTopへ戻るボタンが使えますよ”という、
出来上がっている物を取り付けるだけでOK！
カスタマイズもプラグインのメニューから簡単に変更可能！
みたいな便利な機能です。
※イメージ的には外付けハードみたいな感じですかね？
一方、jQueryとはJavaScriptというプログラム言語のライブラリの一つです。
JavaScriptは20年ほど前に誕生しましたが、その頃のWebページは文字と写真を表示するだけでした。
当時を『静的』とすると、JavaScriptの登場で入力フォームのエラーチェックや
マウスをクリックしたり画面をタップしたりする事でデザインを変更出来る様な
Webページに動きを持たせる『動的』な表現が可能になりました。
JavaScriptはWebブラウザ上のあらゆる動きを制御出来ます。
ライブラリとは便利な機能や処理を箱の中にしまった様なものです。
その箱の中には膨大な量のコードが書かれていて、何度も何度も使用する様な処理を毎回記述する手間を無くすと同時に、
他の人もその箱を呼び出す事で簡単に便利な機能を使ったり、処理をする事が出来るようになります。
その１つがjQueryです。
JavaScriptは
<script type="text/javascript"> 処理を記述 </script>
の様な記述をHTMLに埋め込みます。
では、早速記述してみましょう！
※イメージ的にはデスクトップ上に保存ですかね？
どちらもPC使用時に視覚的に見えますが、持ち運び（サイト表示）の際に外付けハードとデスクトップ上に保存のどちらが手軽に動けるかどうか？
という例えは正しいのかどうか分かりませんが、プラグインより直接jQueryを書き込んだ方が動作が重くなりません。
スポンサーリンク
phpファイルを編集してみましょう
WordPressでの話になりますが、編集ページの『外観』から
『テーマの編集』で色々なファイルが表示されます。
その中のfooter.phpとstyle.cssというファイルを編集します。
まずはボタンの宣言をします。
<div id="pagetop"><a id="move_pagetop"></a>▲</div>
上記のHTMLタグを、footer.phpの<?php wp_footer(); ?>の下に記述します。
ちなみに”▲”の部分を”Top”や”戻る”の様に変更する事で表示が変わります。
上記に続けてjQueryを挿入します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
続いてボタンの制御をします。
<script>
jQuery(function(){ //jQuery(document).ready(function(){の略
jQuery(window).scroll(function()
var now = jQuery(window).scrollTop();//Topから現在位置までの距離を取得して、変数nowに格納
if(now > 600){ //Topから現在位置（now）までの距離が600以上であれば
jQuery('#pagetop').fadeIn('slow'); //ボタン（#pagetop）をゆっくり表示する
}else{
jQuery('#pagetop').fadeOut('slow'); //それ以外であれば表示しない
}
});
//Topへ戻るボタンのクリックイベント
jQuery('#move_pagetop').click(function(){
jQuery('html,body').animate({scrollTop:0},300);
//ページ全体（htmlとbody）のanimate({属性：属性の変化値},速度)
});
});
</script>
上記をjQueryに続けて記述して下さい。
footer.phpへの記述は以上です。
cssファイルの編集
次にcssでボタンの色や形、表示する場所を記述します。
#pagetop{
position:fixed;
right:30px; /*ブラウザ上の右端から*/
bottom:30px; /*ブラウザ上の下部から*/
display: none;
}
#pagetop a{
color:#ffffff;
padding:20px;
text-decoration:none;
display:block;
cursor:pointer; /*画像の上にマウスを乗せた時、指マークに変化*/
text-align:center;
background:#aaa;
line-height:100%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#pagetop a:hover{ /*aタグにマウスポインタが乗ったら*/
background:#ff0000; /*色の変更（初期値は赤）
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
}
上記をstyle.cssの/*Printの上に記述して下さい。
どうでしょうか？
以上簡単なTopへ戻るボタンの実装でした♪
スポンサーリンク
コメント