【はてなブログ】トップに戻るボタンを設置する方法

2016/05/12

code

1.CSSを追加
2.トップに戻るボタンを追加

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

jQueryを組み込んでいない人は、別途組み込んでください。上記のようなものです。

1.CSSを追加

/* page-top */
#back-to-top-area {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 14px;
}
#back-to-top-area a {
	background: #666;
	text-decoration: none;
	color: #fff;
	width: 120px;
	padding: 10px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#back-to-top-area a:hover {
	text-decoration: none;
	background: #999;
}

フッターのデザインCSSに上記を追加します。
ボタンの色・形状を指定しています。画像化したい人はこのあたりを変更すればよいかと思います。

2.トップに戻るボタンを追加

<p id="back-to-top-area"><a id="back-to-top" href="#"> トップに戻る </a></p>
<script>
	$('a#back-to-top').click(function() {
		$('html, body').animate({scrollTop:0},'slow');
		return false;
	});
	
	$(function() {
	    var topBtn = $('#back-to-top-area');
	    topBtn.hide();
	    //スクロールが300に達したらボタン表示
	    $(window).scroll(function () {
	        if ($(this).scrollTop() > 300) {
	            topBtn.fadeIn();
	        } else {
	            topBtn.fadeOut();
	        }
	    });
	});
</script>

フッターに上記を追加します。
3行目から6行目までは、ボタンを押したときに、スムーズにスクロールして戻るためのロジックです。
8行目から19行目は、少し画面をスクロールしたら、ボタンを表示するロジックです。300という値を変更することで、ボタンが現れるまでのスクロール位置を変更できます。