ページトップ

仕様

名称

ページトップ

概要

ページトップへスクロールするプログラムです。

ライブラリ

jQuery(jQueryのダウンロード

デモンストレーション

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

設置方法

HTML

<div id="page_top"><a href="#"><img src="/img/icon/chevron-top-3x.png" alt="ページトップへ"></a></div>

CSS

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

#page_top a {
	display: block;
	padding: 15px;
	border-radius: 30px;
	background: #cccccc;
}

#page_top a:hover, #page_top a:active {
	text-decoration: none;
	opacity: 0.5;
}

JavaScript

$(function(){
	var pagetop = $('#page_top');
	$(window).scroll(function(){
		if ($(this).scrollTop() > 500){
			pagetop.fadeIn();
		} else {
			pagetop.fadeOut();
		}
	});
	pagetop.click(function(){
		$('html,body').animate({scrollTop:0},500);
		return false;
	});
});