“トップへ戻る”ボタンを途中から表示させる方法

サイトを見ていると、下の方にスクロールした時に
トップへ戻れるボタンが現れることがありますよね!

それを実装するには以下のようにすれば大丈夫です!

まずは、ボタンを作ります。

<div id="page-top">
<a href="#header">トップへ戻る<span style="font-size: 14px;"></a></span>
</div>

そのあとcssでデザインを固定化します。

/*ボタンを固定する*/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
/*ボタンをデザインする*/
#page-top a {
	background: #ccc;
	text-decoration: none;
	color: #fff;
	padding: 10px;
	text-align: center;
	display: block;
	border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: #aaa;
}

最後にheader内に下記コードを読み込ませる。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var topBtn = $('#page-top');
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	//スクロールしてトップ
    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
    });
});
</script>

これでばっちりOKです!

コメントを残す