上に戻るボタンをアイコンを使って表現してみた

いろいろサイトを見てみると上に戻るボタンがついているのを発見したので僕も実装したいなあと思い実装しました。
今回参考にさせていただいたブログ・サイトはこちら
www.webopixel.net
serinaishii.hatenablog.com

まるまる同じものにしてもつまらないので僕は上に戻るボタンをアイコンに変えてみました。

”上に戻るボタン”をつくる

<p id="page-top"><a href="#container">Top Page</a></p>

上記HTMLをフッターに書きます。フッターに書く理由はあとで話します。
そうするとフッター部分に下記のようなリンクが現れます。

Top Page

次にこのリンクを装飾してボタンのように変更します。

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

Top Page

web0pixel様のサイトですとリンクをCSSで装飾しボタンのようにしています。
僕はこのボタンの部分をロケットのアイコンに変えます。

上に戻るボタンをアイコンに変える

<p id="page-top"><a href="#container"><img src="〇〇〇"></a></p>

Top Pageという文字の部分をimg srcで画像データを読み込んでアイコンに変えます。
ロケットのアイコンはフリー素材でダウンロードしたものです。

このままだと

こうなってしまうのでCSSも変更してあげます。
まわりのグレーの四角はいらないので削ってあげて、あとはロケットなのでマウスオーバーしたときに少し動くようにしてあげます。

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    }

#page-top a:hover {
    position: fixed;
    bottom: 22px;
    right:20px;
    }

これで準備ができたのでいよいよjQueryを書き込んでいきます。

jQueryで上に戻るようにする

$(function() {
	var topBtn = $('#page-top');	
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {　/*--上から100px移動したら--*/
			topBtn.fadeIn();          /*--ボタンを出現させる--*/
		} else {                          /*--そうでない場合は--*/
			topBtn.fadeOut();         /*ボタンを隠す--*/
		}
	});
	  topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);                          /*--500はスクロールの速さ--*/
		return false;                     /*--100だと早く、1000だと遅い--*/
    });
});
</script>

jQueryは本来jQueryをダウンロードしてそれをサーバーにアップして使うもの？らしいのですが今回のようにHTMLに直接書くこともできるようです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
<!-- この部分に上記のjavascriptを書きます -->
</script>

ここまでで上に戻るボタンは完成になります。
僕はアイコンを少し小さめにしたので大丈夫ですが、大きいアイコンを使うとスマホで表示したときに邪魔になるので注意が必要です。
こんな感じに文章に上にアイコンが表示されます。

まあ邪魔っちゃ邪魔ですよね。
そんなときは

@media only screen and (min-width: 769px) and (max-width: 1980px)
{   /*--ここにCSSを記述--*/
}

これで上に戻るボタンを装飾しているCSSを囲ってください。
そうすることで769px～1980pxの画面サイズの場合のみ囲ってあるCSSを適用することができます。
スマホで見たときはCSSが適用されないので、アイコンは文章中に表示されずフッターに表示されるようになります。
これをMedia Queriesと呼ぶそうです。
ちなみにスマホのサイズは480px？とかで768pxがタブレット、それ以上がPCなんだとか。

スマホで閲覧するときはjQueryを表示しない方法を探したんですが見つけられなかったので今回のような方法をとりました。
とりあえず僕はアイコンを表示しておきますが、スマホやタブレットは時間が表示されている部分をタップすると上に戻れるのでいらないんですけどね。
ワンポイントとして残しておこうかと思います。

今回初めてjQueryを使ってみましたがまるまるコピペになってしまったので、次からは自分で考えながらやっていこうかと思います。