jQueryのscrollで簡単にページトップへのアンカーボタンを固定表示



jQueryのscrollを使用し、簡単な記述でページトップへの
アンカーボタンを固定表示してみます。
過去にJQUERY.SCROLLUP:ページトップへのアンカーリンクを任意の箇所に自動表示させるJS
ご紹介しましたが、同様なイメージです。

1.CSSの記述例

ページにスクロールが表示される必要がりますので、
エリアの高さを仮で1500pxに指定してます。

<style>
.clWrap{
	width:800px;
	margin:0 auto;
	height:1500px;
}
.pagetop{
	position: fixed;
	bottom: 20px;
	margin: 0 0 0 680px;
	height:25px;
	width:120px;
	text-align:center;
	cursor:pointer;
	background-color:#000;
	color:#FFF;
	line-height:1.4em;
}
</style>

2.読込むJsファイルとJavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

	$('.pagetop').hide();

	$(window).scroll(function () {
		if ($(this).scrollTop() > 120) {
			$('.pagetop').fadeIn();
		} else {
			$('.pagetop').fadeOut();
		}
	});

    $('.pagetop').click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 200);
		return false;
    });

});
</script>

3.HTMLの記述例

<div class="clWrap">

    <div class="pagetop">
    PAGE TOP▲
    </div>
 
</div><!--/clWrap-->

jQueryのscrollを使って簡単にページトップへのアンカーボタンを固定表示するデモ

JavaScriptの記述も簡単ですし、ボタンエリアの位置が
ブラウザの絶対配置では無いのが良い気がします。