WordPress のプラグイン無しですごく簡単に「ページの先頭へ」ボタン表示しよー

このページの銭湯へ☆
銭湯って最近見かけませんね〜w 長いこと行ってないですw

Scroll to Top Button ?

このページの先頭へ

よく見かけるじゃないですかー?「このページの先頭へ」みたいなボタンっ!page top ボタン?スクロールボタン?なんて言うんでしょー?? あれを簡単に(そもそも難しくないですよねw) WordPress に設置してみるのと、ついでにスクロールでのアプローチも考えてみたいと思います〜w

基本的に手抜き大好き!で面倒なこと嫌い!!で細かいことも気にしないですけど、気長にお付き合いください〜w

このページの先頭へ!

スクロール位置の制御をするので jQuery 使います!WordPress だと標準で使えるから便利ですね!

jQuery("html, body").scrollTop(0);

ページの先頭位置(0)へ移動だとこんな感じですよね??

1
2
3
jQuery("#page-top").click(function(){
	jQuery("html, body").scrollTop(0);
});

クリックした時に動作させたいので click() を使います。

1
2
3
4
5
6
7
8
9
10
11
12
function scrolltop_button_js(){
?>
<script type="text/javascript">
jQuery(function(){
	jQuery("#page-top").click(function(){
		jQuery("html, body").scrollTop(0);
	});
});
</script>
<?php
}
add_action("wp_head", "scrolltop_button_js");

で、手抜きなので functions.php にこう書きます。フックを wp_head にしているので head タグあたりに jQuery のコードが自動で挿入されると思います。あとは、「このページの先頭へ」のイメージでも用意してID に page-top を入れておきます。

<img id="page-top" alt="このページの先頭へ!" title="このページの先頭へ!" src="イメージのパス" />

フッターとかお好きなところに挿入して試してみてください。
CSS はお好みでw

このページの先頭へ
↑ 設置させるとこんな感じで動きます。簡単かんたん〜w

このページの一番下へ!

「このページの後尾へ」なんて見たことないですよね〜w 先頭の反対語は後尾みたいですw 後尾はあれなので「一番下」を使います〜w で、あまり需要ないかもですが「このページの一番下へ」のボタンも試してみたいと思います。

jQuery("html, body").scrollTop(jQuery("body").height());

height() を使ってページ全体の高さを取得してそこに移動しています。

1
2
3
4
5
6
7
8
9
10
11
12
function scrollbottom_button_js(){
?>
<script type="text/javascript">
jQuery(function(){
	jQuery("#page-bottom").click(function(){
		jQuery("html, body").scrollTop(jQuery("body").height());
	});
});
</script>
<?php
}
add_action("wp_head", "scrollbottom_button_js");

functions.php に貼り付けるならこんな感じです。

このページの一番下へ
↑ 設置させるとこんな感じです。

このページの中央へ!

さらに需要なさそうですけど、「このページの中央へ」のボタンも考えてみます〜w

1
2
3
4
5
6
7
8
9
10
11
12
function scrollmiddle_button_js(){
?>
<script type="text/javascript">
jQuery(function(){
	jQuery("#page-middle").click(function(){
		jQuery("html, body").scrollTop(jQuery("body").height()/2-jQuery(window).height()/2);
	});
});
</script>
<?php
}
add_action("wp_head", "scrollmiddle_button_js");

ちょっと手抜きですが functions.php に貼り付けるならこんな感じです。ページの半分の値からウィンドウの高さの半分の値をさらに引いています。これでちょうど中央が表示されているんではないでしょーか?w

このページの中央へ
↑ 設置するとこんな感じです〜w

3ヶ所のソースを合わせる!

どうせなら3つをセットで使ってください!

1
2
3
4
5
6
7
8
9
10
11
12
function scroll_button_js(){
?>
<script type="text/javascript">
jQuery(function(){
	jQuery("#page-top").click(function(){jQuery("html, body").scrollTop(0);});
	jQuery("#page-bottom").click(function(){jQuery("html, body").scrollTop(jQuery("body").height());});
	jQuery("#page-middle").click(function(){jQuery("html, body").scrollTop(jQuery("body").height()/2-jQuery(window).height()/2);});
});
</script>
<?php
}
add_action("wp_head", "scroll_button_js");

お得なセットですよー!(なにがやねんっw)

アニメーションさせよー!

せっかくなのでスクロールの動きもアニメーションさせましょ〜w
jQuery にはアニメーションさせるのに便利な animate() があります!これを使って試してみよー!

1
2
3
4
5
6
7
8
9
10
11
12
function aniscroll_button_js(){
?>
<script type="text/javascript">
jQuery(function(){
	jQuery("#page-top").click(function(){jQuery("html, body").animate({scrollTop:0},"slow");});
	jQuery("#page-bottom").click(function(){jQuery("html, body").animate({scrollTop:jQuery("body").height()},3000);});
	jQuery("#page-middle").click(function(){jQuery("html, body").animate({scrollTop:jQuery("body").height()/2-jQuery(window).height()/2},10000);});
});
</script>
<?php
}
add_action("wp_head", "aniscroll_button_js");

改行入れないと見づらいですね、すみません〜w
animate() には速度が slow, normal, fast の3タイプとミリ秒が指定可能みたいです!
slow と normal と fast の差はそこまで大きくないので normal とミリ秒指定の3秒と10秒を試してみます〜w
※ 下のボタンは分かりやすいように全部先頭にしています。

このページの先頭へ
↑ normal を指定しています!

このページの先頭へ
↑ 3 秒 を指定しています!

このページの先頭へ
↑ 10秒 を指定しています!

イージングで途中の変化の速度も指定出来るみたいです。
→ jQuery Easing – jQuery 日本語リファレンス

応用編!

スクロールでどうゆうアプローチが出来るかな〜と考えて、個人的には遊び心がある物が良いと思いこんな感じにしてみました。とりあえず見てみてくださいw

このページの銭湯へ
↑ 一応銭湯がテーマですw

Google Chrome 11 と Firefox 4 と Opera 11 では動作確認しています。Internet Explorer で動かない場合は他のブラウザでお試しください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function go_sento_js(){
?>
<script type="text/javascript">
jQuery(function(){
	jQuery("#sento").click(function(){
		jQuery("body").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>");
		jQuery("#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;'>");
		jQuery("#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;'>");
		jQuery("#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;'>");
		jQuery("#karakusa").css("height",jQuery("body").height());
		jQuery("html, body").animate({scrollTop:jQuery("body").height()},1000);
		jQuery("html, body").animate({scrollTop:jQuery("body").height()/4*3},6000,function(){jQuery("#geta").fadeIn("slow");});
		jQuery("html, body").animate({scrollTop:jQuery("body").height()/4*2},5000,function(){jQuery("#yukata").fadeIn("slow");});
		jQuery("html, body").animate({scrollTop:jQuery("body").height()/4},4000,function(){jQuery("#oke").fadeIn("slow");});
		jQuery("html, body").animate({scrollTop:0},3000);
	});
});
</script>
<?php
}
add_action("wp_head", "go_sento_js");

CSS を直に書いていて見難いかもしれませんが、特に難しいことはしていません。animate() の中で fadeIn() させないと出現タイミングがコントロール出来ないところがポイントかもしれません〜w 上にスクロールさせては fadeIn() 、スクロールさせては fadeIn() って感じで繰り返しでアニメーションっぽくしています。

まとめ

とりあえず、「ページの先頭へ」のボタンは jQuery を使うと簡単に設置出来ると思います!ただブログってすごい数あってその中で覚えていただくのって結構大変なことだと感じています。だから、何か印象に残るアプローチは大切で攻めの姿勢ではいたいと考えています。実用性とインパクトのバランスが難しいですよね〜w

教えて!

何か面白い「このページの先頭へ」ボタンを設置したら教えてください〜!このページに追記で紹介させていただきます〜w @actywav までお願いします〜\(^o^)/