ページ上部までスクロールするAnimated Scroll to Top

Animated Scroll to Top - web designer wall

ソースもダウンロードできるようになっているので、カスタマイズできそうなところを簡単に説明していきます。

次にjavascriptのところを。jQueryをGoogleから読み込んで、以下の部分を記述しています。

<script>
$(document).ready(function(){

	// hide #back-top first
	$("#back-top").hide();
	
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});
</script>

変更できそうなところを簡単に説明します。

10行目 　　if ($(this).scrollTop() > 100) {

ページを下に100px以上移動するとアイコンが現れます。

20行 　　scrollTop: 0

上から0px(一番上)まで戻ります。

21行目　 　}, 800);

800は上まで戻る早さで、数字が小さいほど早く戻ります。

htmlは以下のようにシンプルです。

<p id="back-top">
	<a href="#top"><span></span>Back to Top</a>
</p>

「Back to Top」という文字は変更しても、なくても大丈夫です。

最後にCSSです。紹介しているページに載ってあるのでポイントだけ解説します。

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}

アイコンが表示される位置です。デフォルトではhtmlコードを挿入したところから左に150px、ページの下から30pxのところにアイコンが現れて固定されます。

次はともに #back-top span の部分です。

width: 108px;
height: 108px;

background: #ddd url(up-arrow.png) no-repeat center center;

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

サイズ、画像、枠の変更はここらへんでできると思います。

縦横108pxのボックスの中心に画像を表示しています。画像 up-arrow.png は矢印のみで外枠は画像ではなく、 border-radius で角を丸くして表現しています。

-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;

CSS3のtransitionを使うことで、オンマウスで背景色が変わる際、すぐに変わらず1秒かけてスムーズに変わります。

このブログでも設置してみました

使い勝手がよかったの、でこのブログでも丸いボタンを設置してみました。

丸くして、文字も削除しました。

IEはまだborder-radiusに対応していないので丸くなりませんが四角でもそんなに見栄えは悪くないと思います。

#back-top {
	position: fixed;
	bottom: 10px;
	margin-left: -70px;
}
#back-top a {
	width: 41px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #E6E6FA;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}
/* arrow icon (span tag) */
#back-top span {
	width: 41px;
	height: 41px;
	display: block;
	margin-bottom: 7px;
	background: #fff url(画像のURL) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #B0C4DE;
}

数値を変更したところだけ赤くしていますので参考にしていただければと思います。CSS3のおかげで色々表現できるようになりましたね。

最後に

ユーザビリティを考えると、このようなスクロールして戻るボタンはあった方がいいのかなと個人的には思います。わずらわしいと感じる人もいるかもしれませんが。。

今回のものは設置もカスタマイズも容易ですし、試す価値ありと思います。