ページトップ

仕様

名称	ページトップ
概要	ページをスクロールするとボタンが表示され、ボタンをクリックするとページトップへスクロールされるプログラムです。
ライブラリ	jQuery（ダウンロード）

デモンストレーション

当サイトの全てのページにて実装しています。

設置方法

HTML

<div id="pagetop">
	<a href="#"><img src="画像ファイルのパス" alt="ページトップ"></a>
</div>

CSS

#pagetop {
	display: none;
	position: fixed;
	right: 45px;
	bottom: 45px;
	z-index: 200;
	width: 45px;
	height: 45px;
	border-radius: 30px;
}
#pagetop a:hover, #pagetop a:active {
	text-decoration: none;
	opacity: 0.5;
}
#pagetop img {
	border-radius: 30px;
}

JavaScript

$(function() {
	$(window).scroll(function() {
		//500=ボタンが表示される位置（単位：px）
		if ($(this).scrollTop() > 500) {
			$('#pagetop').fadeIn();
		} else {
			$('#pagetop').fadeOut();
		}
	});
	$('#pagetop').click(function() {
		//500=スクロールされる速さ（単位：ms）
		$('html,body').animate({ scrollTop: 0 }, 500);
		return false;
	});
});