ページトップ

仕様

名称

ページトップ

概要

ページをスクロールするとボタンが表示され、ボタンをクリックするとページトップへスクロールされるプログラムです。

ライブラリ

jQuery(ダウンロード

デモンストレーション

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

設置方法

HTML

<div id="pagetop">
	<a href="#"><img src="/img/common/icon_pagetop.png" alt="ページトップ"></a>
</div>

CSS

#pagetop {
	display: none;
	position: fixed;
	right: 45px;
	bottom: 45px;
}

#pagetop a {
	color: inherit;
}

#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;
	});
});