上の画像のように、当サイトでも利用している『賢威7』(スタンダード版)の「上へ戻る」ボタンは画像で作られています。

この画像の上へ戻るボタンを、画像を使わずにCSS(スタイルシート)のみでかっこよく作る方法をご紹介します。

でき上がりイメージ

上の画像はスマホで見た時のものです。

ページが表示された時は、もちろん上へ戻るボタンはありません。少しスクロールしたら、下から「ひゅっ」と出てきます。

また、背景の部分は「Data URI scheme」という技術を利用しており、CSSだけでデザインをしています。

画像のように、「グレー」と「透明」の市松模様で構成しているので、下の文字や要素が透けて見えます。ですので、スマホで見ても圧迫感も軽減でき、可読性もアップします。

画像も使っていないため、データ量を減らすことができ、スマホに優しいデザインです^^

動作部分のjavascriptが分かりやすいサイトをご紹介

javascriptの動作部分は以下のサイトを参考にしています。サンプルもあり、とても分かりやすいです。

参考jQueryでスクロールすると表示する系いろいろ

HTMLの修正

さて、まずは「上へ戻るボタン」のHTML部分を修正します。

当サイトの場合は賢威の子テーマで運用しているため、子テーマディレクトリにある「footer.php」を修正しています。

修正前

<!--▼ページトップ-->
<p class="page-top"><a href="#top"><img class="over" src="<?php bloginfo('template_url'); ?>/images/common/page-top_off.png" width="80" height="80" alt="ページの先頭へ"></a></p>
<!--▲ページトップ-->

デフォルトだと22~24行目にあります。

修正後

<!--▼ページトップ-->
<div id="totop"><a href="#top"><i class="fa fa-chevron-up"></i></a></div>
<!--▲ページトップ-->

上を示す文字は「Font Awesome」を使っています。

関連記事賢威7でWebアイコンフォント「Font Awesome」を実装する方法

CSSを追記

当サイトの場合は、子テーマディレクトリの「base.css」に追記しています。

/* 上へ戻るボタン */
#totop {
	position: fixed;
	right: 10px;
	margin-bottom: -10px;
	z-index:100;
}
#totop a {
	background:url(
	data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQImWO4ePHifwYYuHjx4n8APYwG5TNMyv8AAAAASUVORK5CYII=
		) repeat;
	text-decoration: none;
	color: #fff;
	width: 50px;
	padding: 16px 0;
	text-align: center;
	display: block;
}
#totop a:hover {
	background:url(
		data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQImWN4+PDhfwYYePjw4X8AQRwHRb1+VrQAAAAASUVORK5CYII=
	) repeat;
}

前述の通り、背景部分は「Data URI scheme」という技術を使っています。

javascriptの追加

「totop.js」ファイルの作成

子テーマの「js」ディレクトリに「totop.js」を以下の内容で作成します。

jQuery(function($){

	$(function() {
		var showFlug = false;
		var topBtn = $('#totop');	
		topBtn.css('bottom', '-100px');
		var showFlug = false;
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				if (showFlug == false) {
					showFlug = true;
					topBtn.stop().animate({'bottom' : '20px'}, 200); 
				}
			} else {
				if (showFlug) {
					showFlug = false;
					topBtn.stop().animate({'bottom' : '-100px'}, 200); 
				}
			}
		});
		//スクロールしてトップ
	    topBtn.click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 500);
			return false;
	    });
	});

});

当サイトの環境では、前述の参考にしたサイトのソースだけでは動きませんでした。

対策のために「jQuery(function($){」で括っています。

この点についての詳しい解説は以下のサイトが分かりやすいので、ご覧ください。

参考「WordPressでjQueryのコードが動かない」場合の対処方法

「totop.js」ファイルを読み込ませる

当サイトの場合は子テーマディレクトリの「header.php」のの直前付近に以下を追記しています。

<script type="text/javascript" src="/wp-content/themes/fans-web-child/js/totop.js" charset="utf-8"></script>

これで画像を使わずにかっこいい(よね?)「上へ戻るボタン」が表示されます。