7月になり、日にちが経ちますが…

まだ梅雨シーズンなのか知らんけど…

一日より早く梅雨上げ宣言になってほしい気分です…

しかもこっちは早く夏が来て、年中夏であってほしい気持ちでたまりません！

天気のニュースを見る限り、梅雨前線、北上してるのか停滞してるのか…

早く北上してくれ！

北上して、梅雨明け宣言してほしいんやけど！

しかも、今年は「気象病」にならないことを…

話変わりますが…

javascript「Page Top」の実装

Webページにいつも必要不可欠なプログラムの一つ、「Page Top」！

1Pごとに読み終わった後に上にホイールマウスを使って上まで行ったりしてませんか？

こっちはめんどくさくて、「Ctrl」+「Home」のショートカットキーを押して「Page Top」まで戻ります。

プロならほとんど、このショートカットキーを使うかもしれませんが…

素人だとしたらわざわざマウスに実装してるホイールボタンを使ってぐるぐるしながら「Page Top」まで足を運んでるかもしれません…

ユーザービリティの一つとして、簡単なjavascriptのプログラムを作って「Page Top」を実装してみよう！

<div id="page-top"><a href="#">TOP</a></div>

$(function(){
	var pagetop = $('#page-top');
	pagetop.hide();
	$(window).scroll(function () {
		// 上から100px以上スクロールしたら実現する
		if ($(this).scrollTop() > 100) {
			pagetop.fadeIn();
		} else {
			pagetop.fadeOut();
		}
	});
	pagetop.click(function () {
		// 上まで行くスピード
		$('body, html').animate({ scrollTop: 0 }, 1000);
		return false;
	});
});

たったこれだけで実装することができます。

CSSは割愛しています。

自分の好みのデザインに合わせてCSSをコーディングをしておいてくださいね。

では、また！