「ページトップ」「サイドバー位置へジャンプ(モバイル)」ボタン

以前記事にした、「ページトップ」へ戻るボタンとナビゲーションバーのメニュー項目に「サイドバー位置へジャンプ」を設置(モバイル)の改良版です。

ナビゲーションバーのメニューは指が太い人は困ったと思いますが、これで解決です。

今回の方法に変更する方は、前回のナビゲーションバーのメニュー項目は削除してください。

ナビゲーションバーに「サイドバー位置へジャンプ」(QooQ モバイル)

モバイル等の小さい画面だと「サイドバー」が「投稿一覧」や「個別記事」の下に移動してしまうため、 「サイドバー」の TOP位置に移動できるジャンプがあるといいと思い、隠し機能として設置しました。

ryo1010.blogspot.com

モバイル等の小さい画面だと「サイドバー」が「投稿一覧」や「個別記事」の下に移動してしまうため、 モバイルのときだけディスプレイ下部の一番右にハンバーガーマークが出現します。

それを押すと「サイドバー」位置にアニメーション移動します。

ただし、このボタンはモバイル(width: 768px以下)でのみ表示されます。

その左隣には「ページトップ」へ戻るボタン(下方へのスクロールが100に達したら表示される)もあります。

これをタップするとページトップにもどります。

設定方法

ダッシュボード→レイアウト→ガジェットの追加→「HTML/javascript」「＋」で追加ウィンドウが開くので、

ガジェットの配置場所はサイドバー等に移動(ドラッグ)する。

前回、「ページトップ」へ戻るボタンのみを設置した方は下記コードに変更するだけです。

<p id="page-top"><a href="#">TOP</a></p>
<p id="page-sp"><a href="#サイドバー">&#8801;</a></p>

<style type="text/css">
/* PageTop, page-sp ボタン基本設定 */
#page-top, #page-sp {position: fixed; bottom: 15px; z-index: 10; font-size: 85%;}
#page-top {right: 60px;}
#page-sp {right: 15px;}
#page-top a{display: inline-block;}
#page-sp a{display: none;}
#page-top a, #page-sp a {text-decoration: none; background-color: #efebe5; opacity: 0.9; color: #808080; height: 40px; width: 40px; line-height: 40px; border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; transition: .4s;}
#page-top a:hover, #page-sp a:hover {text-decoration: none; background-color: #808080; color: #fffbe5;}

@media screen and (min-width: 0) and (max-device-width: 768px) {
	#page-top, #page-sp {bottom: 10px;}
	#page-sp a{display: inline-block;}
}
/* サイドバーに空白が出てしまうので消す */
#HTML2 > div.widget-content { background-color:#f6f5f5;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var topBtn = $('#page-top'); 
	topBtn.hide();
	//スクロールが100に達したらボタン表示
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	$('a[href^="#"]').click(function(){ // "#" で始まる要素を選択
		var speed = 500;
		var href = $(this).attr("href");
		if(href == "#" || href == ""){
			var target = $("html"); // そのページ
			var position = target.offset().top;
		}else{
			var target = $(href); // href要素
			var position = target.offset().top - 10; // 10 は飛び先の位置調整
		}
		$("body, html").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>

jQueryをすでに登録している方は中ほどの jQuery v1.9.1 の登録行は不用です。

このコードはフッター等へのジャンプに簡単に応用できますので非常に便利です。

ジャンプ先のIDはそのまま使えますし、

最下部の場合は、分岐して var position = $(document).height(); にすれば OK です。

追記：2020.08.10

z-index はライトボックスとのからみで 110 から 10 に変更しました。