jQuery でページの先頭へ！
Scroll to Top Button ？
よく見かけるじゃないですかー？「このページの先頭へ」みたいなボタンっ！page top ボタン？スクロールボタン？なんて言うんでしょー？？ あれを簡単に（そもそも難しくないですよねｗ） WordPress に設置してみるのと、ついでにスクロールでのアプローチも考えてみたいと思います〜ｗ
基本的に手抜き大好き！で面倒なこと嫌い！！で細かいことも気にしないですけど、気長にお付き合いください〜ｗ
このページの先頭へ！
スクロール位置の制御をするので jQuery 使います！WordPress だと標準で使えるから便利ですね！
$("body").scrollTop(0);ページの先頭位置へ移動だとこんな感じですよね？
$("#page-top").click(function(){
$("body").scrollTop(0);
});クリックした時に動作させたいのでclick()を使います。
function scrolltop_button_js(){
?>
<script type="text/javascript">
$(function(){
$("#page-top").click(function(){
$("body").scrollTop(0);
});
});
</script>
<?php
}
add_action("wp_head", "scrolltop_button_js");WordPress に簡単に実装したいので functions.php にこう書きます。フックを wp_head にしているので head タグあたりに jQuery のコードが自動で挿入されると思います。あとは、「このページの先頭へ」のイメージでも用意してIDに page-top を入れておきます。
<img id="page-top" alt="このページの先頭へ！" title="このページの先頭へ！" src="イメージのパス" />フッターとかお好きなところに挿入して試してみてください。
CSS はお好みで！
↑ 設置させるとこんな感じで動きます。簡単かんたん〜ｗ
このページの一番下へ！
「このページの後尾へ」なんて見たことないですよね〜ｗ 先頭の反対語は後尾みたいですｗ 後尾はあれなので「一番下」を使います〜ｗ で、あまり需要ないかもですが「このページの一番下へ」のボタンも試してみたいと思います。
$("body").scrollTop($("body").height());height()を使ってページ全体の高さを取得してそこに移動しています。
function scrollbottom_button_js(){
?>
<script type="text/javascript">
$(function(){
$("#page-bottom").click(function(){
$("body").scrollTop($("body").height());
});
});
</script>
<?php
}
add_action("wp_head", "scrollbottom_button_js");functions.php に貼り付けるならこんな感じです。
↑ 設置させるとこんな感じです。
このページの中央へ！
さらに需要なさそうですけど、「このページの中央へ」のボタンも考えてみます〜ｗ
function scrollmiddle_button_js(){
?>
<script type="text/javascript">
$(function(){
$("#page-middle").click(function(){
$("body").scrollTop(($("body").height()-$(window).height())/2);
});
});
</script>
<?php
}
add_action("wp_head", "scrollmiddle_button_js");ちょっと手抜きですが functions.php に貼り付けるならこんな感じです。ページの半分の値からウィンドウの高さの半分の値をさらに引いています。これでちょうど中央が表示されているんではないでしょーか？ｗ
↑ 設置するとこんな感じです〜ｗ
３ヶ所のソースを合わせる！
どうせなら３つをセットで使ってください！
function scroll_button_js(){
?>
<script type="text/javascript">
$(function(){
$("#page-top").click(function(){$("body").scrollTop(0);});
$("#page-bottom").click(function(){$("body").scrollTop($("body").height());});
$("#page-middle").click(function(){$("body").scrollTop(($("body").height()-$(window).height())/2);});
});
</script>
<?php
}
add_action("wp_head", "scroll_button_js");お得なセットですよー！（なにがやねんっｗ）
アニメーションさせよー！
せっかくなのでスクロールの動きもアニメーションさせましょ〜ｗ
jQuery にはアニメーションさせるのに便利なanimate()があります！これを使って試してみよー！
function aniscroll_button_js(){
?>
<script type="text/javascript">
$(function(){
$("#page-top").click(function(){$("body").animate({scrollTop:0},"slow");});
$("#page-bottom").click(function(){$("body").animate({scrollTop:$("body").height()},3000);});
$("#page-middle").click(function(){$("body").animate({scrollTop:($("body").height()-$(window).height())/2},10000);});
});
</script>
<?php
}
add_action("wp_head", "aniscroll_button_js");改行入れないと見づらいですね、すみません〜ｗ
animate()には速度がslow normal fastの３タイプとミリ秒が指定可能みたいです！
slowとnormalとfastの差はそこまで大きくないので normal とミリ秒指定の３秒と１０秒を試してみます！
※ 下のボタンは分かりやすいように全部先頭にしています。
↑ normal を指定しています！
↑ 3 秒 を指定しています！
↑ 10秒 を指定しています！
イージングで途中の変化の速度も指定出来るみたいです。
→ jQuery Easing – jQuery 日本語リファレンス
応用編！
「スクロールでどんなアプローチが出来るかな〜？」と考えて、個人的には遊び心がある物が良いと思い作ってみました！とりあえず見てみてくださいｗ
↑ 一応銭湯がテーマですｗ
Google Chrome 11 と Firefox 4 と Opera 11 では動作確認しています。Internet Explorer で動かない場合は他のブラウザでお試しください。
function go_sento_js(){
?>
<script type="text/javascript">
$(function(){
$("#sento").click(function(){
$("body div:last").after("<div id='karakusa' style='position:absolute;top:0;left:0;z-index:1999;width:100%;background:url(/wp-content/themes/stardusty/images2/karakusa.png);text-align:center;'><a href='/4341'><img src='/wp-content/themes/stardusty/images2/noren.png'></a></div>");
$("#karakusa").after("<img id='geta' src='/wp-content/themes/stardusty/images2/geta.png' style='display:none;position:fixed;top:60%;left:10%;z-index:2000;'>");
$("#karakusa").after("<img id='yukata' src='/wp-content/themes/stardusty/images2/yukata.png' style='display:none;position:fixed;top:70%;left:40%;z-index:2001;'>");
$("#karakusa").after("<img id='oke' src='/wp-content/themes/stardusty/images2/oke.png' style='display:none;position:fixed;top:60%;left:70%;z-index:2002;'>");
$("#karakusa").css("height",$("body").height());
$("html, body").animate({scrollTop:$("body").height()},1000);
$("html, body").animate({scrollTop:$("body").height()/4*3},6000,function(){$("#geta").fadeIn("slow");});
$("html, body").animate({scrollTop:$("body").height()/4*2},5000,function(){$("#yukata").fadeIn("slow");});
$("html, body").animate({scrollTop:$("body").height()/4},4000,function(){$("#oke").fadeIn("slow");});
$("html, body").animate({scrollTop:0},3000);
});
});
</script>
<?php
}
add_action("wp_head", "go_sento_js");CSS を直に書いていて見難いかもしれませんが、特に難しいことはしていません。animate()の中でfadeIn()させないと出現タイミングがコントロール出来ないところがポイントかもしれません。上にスクロールさせてはfadeIn()。スクロールさせてはfadeIn()って感じで繰り返しでアニメーションっぽくしています。
まとめ
とりあえず、「ページの先頭へ」のボタンは jQuery を使うと簡単に設置出来ると思います！ただブログってすごい数あってその中で覚えていただくのって結構大変なことだと感じています。だから、何か印象に残るアプローチは大切で攻めの姿勢ではいたいと考えています。実用性とインパクトのバランスが難しいですよね〜ｗ
教えて！
何か面白い「このページの先頭へ」ボタンを設置したら教えてください〜！このページに追記で紹介させていただきます〜ｗ @actywav までお願いします〜＼(^o^)／
