元々技術系出身ですので、このブログは技術関連のエントリーも多くなっています。ポイントに関する情報を望んでいる方は、この手の記事は無視してください。

最近、色々なページで、「このページの先頭へ」や「このページのトップへ」というボタンを見かけます。単純に「<a href=”#”>トップへ</a>」のようにリンクしているサイトもありますが、ボタンを押すとスクロールしながら上部まで移動するサイトが多くなっています。ポイ探にも付けたいなぁと思っていましたので少し調べてみました。結構簡単にできるようですので書いてみたいと思います。

1.CSSを用意する

width、heightはボタン画像サイズです。margin-leftはサイトの横幅。position:fixedで表示場所を固定。bottomで下からどのくらいの位置に表示するかを指定しています。

#pageTop {
	width: 60px;
	height: 90px;
	position: fixed;
	left: auto;
	bottom: 110px;
	margin-left: 953px;
}
* html #pageTop {
	position: absolute;
}

2.ソースコードを修正する

jquery.jsを</head>前に書き、<script>のタグを</body>以内に書きます。「<a href=”#” id=”go_to_top”>」をサイトのレイアウトを考えながら配置すればOKです。

<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>

<script type="text/javascript">
$(function(){
$('#go_to_top').click(function () {
$(this).blur();
$('html,body').animate({scrollTop:0}, 'fast');
return false;
});
});
</script>

<div id="pageTop"><a href="#" id="go_to_top"><img src="/img/pagetop.png" width="60" height="90" alt="このページの先頭へ"></a></div>

このブログにも付いていますが、スクロールしてからサイドバーの右にある「このページの先頭へ」ボタンをクリックするとスクロールしながら上まで戻ることができると思います。コンテンツが長いページには有効ですね。