スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

ページを下に進むと現れて、クリックするとページ上部までスクロールするスクリプトを紹介します。結構ありがちですが、さりげなくCSS3を使っているところや、現れるタイミングやスクロールの早さなどカスタマイズしやすそうなところがおすすめポイントです。

Animated Scroll to Top - web designer wall

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>

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

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

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

js
20行   scrollTop: 0

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

js
21行目   }, 800);

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

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

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

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

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

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

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

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

css
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 で角を丸くして表現しています。

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

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

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

scroll-to-top2.png

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

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

css
#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のおかげで色々表現できるようになりましたね。

最後に

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。