【WordPress】スマホ表示でサイドバーまでスクロールするボタン

このブログはプログラミングのコードを備忘録として書き留めておく用途で使っています。

VBAであれば記事にタグ付けしてまとめており、タグクラウドはサイドバーにあります。

PCであればページを表示してすぐに目の前に現れるのですが、スマホだとサイドバーは下に回り込むのでかなりスクロールさせないといけません。これが地味にしんどい。

そういうわけでページ上部にサイドバーまでスクロールするボタンを設置しました。

スクショ

実際にスマホなりデベロッパーツールで見ればわかるのですが、ヘッダーに元々あったメニューボタンの右側にサイドバーボタンを設置しました。

サイドバーボタンを押すと下に回り込んでいるサイドバーまで一気にスクロールされます。

ついでにトップに戻るボタンも設置。広告があるせいでわかりづらいですが、サイドバーの最下部に表示されるようにしています。

もちろんこれらのボタンはPCの時は非表示です。

scroll.js

jQuery(function() {
    jQuery(".sidebar-btn").click(function () {
        var i = jQuery(".sidebar-btn").index(this);
        var p = jQuery("#secondary").eq(i).offset().top;
        jQuery('html,body').animate({ scrollTop: p }, '1000');
        return false;
    });
	
	jQuery(".top-btn").click(function () {
        jQuery('html,body').animate({ scrollTop: 0 }, '1000');
        return false;
    });
});

テーマのフォルダ内にjsというフォルダを作り、その中にscroll.jsというファイルとして保存しています。

.sidebar-btnと.top-btnを押した時の挙動をそれぞれ記述しています。

Twenty Twelveの場合サイドバーは#sedondaryから始まっているので、offset()を使って#secondaryの位置を取得、そこまでスクロールするようにしています。

トップに戻る場合は位置は必然的に0なので、位置を取得する段取りは不要です。

ボタン配置

<button class="sidebar-btn"><i class="fas fa-angle-double-down"></i> SIDEBAR</button>

<button class="top-btn"><i class="fas fa-angle-double-up"></i> TOP</button>

それぞれのボタンを任意の位置に設置します。サイドバーボタンはheader.phpに、トップボタンはsidebar.phpに記述しています。

style.css

.sidebar-btn,
.top-btn {
	float: right;
	padding: 6px 10px;
	padding: 0.428571429rem 0.714285714rem;
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 1.428571429;
	font-weight: normal;
	color: #7c7c7c;
	background-color: #e6e6e6;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6);
	border: 1px solid #d2d2d2;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
	cursor: pointer;
}
.sidebar-btn:hover,
.sidebar-btn:focus,
.top-btn:hover,
.top-btn:focus{
	color: #5e5e5e;
	background-color: #ebebeb;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: linear-gradient(to bottom, #f9f9f9, #ebebeb);
}
.sidebar-btn:active,
.top-btn:active {
	color: #757575;
	background-color: #e1e1e1;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: linear-gradient(to bottom, #ebebeb, #e1e1e1);
	box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
	border-color: transparent;
}

@media screen and (min-width: 600px) {
	.sidebar-btn,
	.top-btn {
		display: none;
	}
}

Twenty Twelveに記述されているボタンのデザインをそのまま使っています。

メディアクエリでPC表示になったらボタンを非表示にしています。

function.php

wp_enqueue_script( 'scroll', get_stylesheet_directory_uri() . '/js/scroll.js', array( 'jquery' ), null, true );

読み込みはfunction.phpでしています。上記に記したように、テーマのフォルダ/js/scroll.jsという階層です。

よくわからなかったので他の引数は適当に入れています。最後のtrueはフッターで読み込むという意味になりますが、falseでヘッダーで読み込んでもどっちでもいいです。

Twenty Twelveは基本的にフッターで読み込んでいるので、これもフッターで読み込ませます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です