神奈川県伊勢原市在住のkusuのサイトです！ホームページ制作のご依頼等承っております！
お問い合わせはこちら
TOP > jQuery > 【jQuery】固定ヘッダーにて別ページの特定の場所に飛ばすには？？

【jQuery】固定ヘッダーにて別ページの特定の場所に飛ばすには？？

2018.04.16
jQuery

　固定ヘッダーでサイトを制作した際に、同サイトの別ページの特定の場所に飛ばしたい…という時に、通常だと以下のデモページのように固定ヘッダーぶん、隠れてしまいます。
デモページ

ただし、jQueryを設定することで以下のデモページみたいに別ページの特定の場所に飛ばしても、固定ヘッダーぶん自動で動き、ヘッダーに隠れる…といったことを防ぐことができます！
デモページ

そこで今回は固定ヘッダーで別ページの特定の場所に飛ばす時の対処法についてご紹介したいと思います！

jQueryを設定する

　今回の対処法は、先ほどもお話しましたがjQueryで設定することで対処することができます！

例として、高さ50pxの固定ヘッダーを表示させていた場合のjQueryの記述方法は以下になります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
$(function () {
	$(window).on('load', function() {
		var url = $(location).attr('href');
		if(url.indexOf("#") != -1){
		var anchor = url.split("#");
		var target = $('#' + anchor[anchor.length - 1]);
			if(target.length){
				var pos = Math.floor(target.offset().top) - 50;
				$("html, body").animate({scrollTop:pos}, 500);
			}
		}
	});
});
</script>

上記コードの11行目

var pos = Math.floor(target.offset().top) - 50;

ここで固定ヘッダーの高さを記述してあげます。

今回は高さを50pxと設定したため50としましたが、固定ヘッダーから少し隙間を空けたところに移動させたい場合は、ここの数値を移動させたいpxぶん＋させると対応可能です！

今回のデモページでいうと、固定ヘッダーから20pxあけたかったので、

var pos = Math.floor(target.offset().top) - 70;

このように70と設定しました！

ページ内リンクのjQueryも記述する場合

　また、以前「【jQuery】固定ヘッダーでページ内リンクを実装する方法」という記事にてご紹介したように、固定ヘッダーでページ内リンクする際のjQueryの記述方法も追記する場合のjQueryコードは以下のようになります！

<script>
$(function () {
	var headerHight = 70;
	$('a[href^=#]').click(function(){
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top-headerHight;
		$("html, body").animate({scrollTop:position}, 550, "swing");
		return false;
	});    
});

$(function () {
	$(window).on('load', function() {
		var url = $(location).attr('href');
		if(url.indexOf("#") != -1){
		var anchor = url.split("#");
		var target = $('#' + anchor[anchor.length - 1]);
			if(target.length){
				var pos = Math.floor(target.offset().top) - 70;
				$("html, body").animate({scrollTop:pos}, 500);
			}
		}
	});
});
</script>

こう記述することで、ページ内の特定の場所および別ページの特定の場所に飛ばす際にも、固定ヘッダー＋20px空けたところに自動で移動させるよう設定させることができます！

レスポンシブサイトの場合は？？

　基本的にはレスポンシブサイトの場合もスマホサイトの固定ヘッダーとPCサイトが同じ高さでしたら、上記のような記述で大丈夫なのですが、もしスマホサイトの固定ヘッダーとPCサイトの高さがそれぞれ異なっている場合にはうまく移動してくれません…。

その場合には、JavaScriptにてブラウザの画面幅を取得し、ブラウザの画面幅によって適用させるjQueryをわけて読み込ませる必要が出てきます。

例えば

  • スマホサイトの固定ヘッダーの高さ：80px
  • PCサイトの固定ヘッダーの高さ：50px

とした場合は、以下のようにjQueryを設定します。

<script>
$(function () {
var windowWidth = $(window).width();
var windowSm = 667;
if (windowWidth <= windowSm) {

$(function () {
	var headerHight = 80;
	$('a[href^=#]').click(function(){
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top-headerHight;
		$("html, body").animate({scrollTop:position}, 550, "swing");
		return false;
	});    
});

$(function () {
	$(window).on('load', function() {
		var url = $(location).attr('href');
		if(url.indexOf("#") != -1){
			var anchor = url.split("#");
			var target = $('#' + anchor[anchor.length - 1]);
			if(target.length){
				var pos = Math.floor(target.offset().top) - 80;
				$("html, body").animate({scrollTop:pos}, 500);
			}
		}
	});
});

} else {

$(function () {
	var headerHight = 50;
	$('a[href^=#]').click(function(){
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top-headerHight;
		$("html, body").animate({scrollTop:position}, 550, "swing");
		return false;
	});    
});

$(function () {
	$(window).on('load', function() {
		var url = $(location).attr('href');
		if(url.indexOf("#") != -1){
		var anchor = url.split("#");
		var target = $('#' + anchor[anchor.length - 1]);
			if(target.length){
				var pos = Math.floor(target.offset().top) - 50;
				$("html, body").animate({scrollTop:pos}, 500);
			}
		}
	});
});

}
});
</script>

まず上記コードの4行目

var windowSm = 667;

ここでどこまでブラウザ幅が狭くなったら読み込むjQueryを変更させるのかを設定しています。

今回は667pxをブレイクポイントとしたので、上の数値を667としました。

ここで例えばタブレットのブラウザ幅になった時から読み込むjQueryを変えたい場合には上の数値を768とした

var windowSm = 768;

と記述することで対応可能です。

スマホ時の固定ヘッダーの設定

　そして、上記コードの

var windowWidth = $(window).width();
var windowSm = 667;
if (windowWidth <= windowSm) {

ここに注目です！

ここでは

windowsWidth：ブラウザ幅
windowSm：読み込むjQueryを変更する起点となるブラウザ幅

を設定しており、3行目にてブラウザ幅が667pxより小さくなった場合という条件分岐文を記述しています。

そのため、それ以降の

$(function () {
	var headerHight = 80;
	$('a[href^=#]').click(function(){
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top-headerHight;
		$("html, body").animate({scrollTop:position}, 550, "swing");
		return false;
	});    
});

$(function () {
	$(window).on('load', function() {
		var url = $(location).attr('href');
		if(url.indexOf("#") != -1){
			var anchor = url.split("#");
			var target = $('#' + anchor[anchor.length - 1]);
			if(target.length){
				var pos = Math.floor(target.offset().top) - 80;
				$("html, body").animate({scrollTop:pos}, 500);
			}
		}
	});
});

がスマホサイト時に読み込むjQueryとなります。

上記見本コードの2・19行目の80がスマホサイトの固定ヘッダーの高さとなりますので、もし固定ヘッダーから10px空けたい場合などはここの数値を90にすればOK、ということですね！

PC時の固定ヘッダーの設定

　そして、上記コードの32行目

} else {

によって、これ以降の記述が667px以外の時の設定(＝PCサイト時の設定)という条件分岐になります！

今回PCサイトの固定ヘッダーの高さを50pxとしたので、記述するコードは

$(function () {
	var headerHight = 50;
	$('a[href^=#]').click(function(){
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top-headerHight;
		$("html, body").animate({scrollTop:position}, 550, "swing");
		return false;
	});    
});

$(function () {
	$(window).on('load', function() {
		var url = $(location).attr('href');
		if(url.indexOf("#") != -1){
		var anchor = url.split("#");
		var target = $('#' + anchor[anchor.length - 1]);
			if(target.length){
				var pos = Math.floor(target.offset().top) - 50;
				$("html, body").animate({scrollTop:pos}, 500);
			}
		}
	});
});

となります！

ここもスマホ時と同じように、もし固定ヘッダーから20px空けたい…などの時は2・19行目の数値を70pxとすることで対応可能です！

スマホの固定ヘッダーの高さが可変する場合には？

　今までのはスマホの固定ヘッダーの高さが固定だった場合の記述方法なのですが、もしスマホの固定ヘッダーの高さが可変する場合には、スマホ時に読み込ませるjQueryを以下のように設定する必要があります！

$(function () {
	var headerHight = $("固定ヘッダーのid名もしくはclass名").outerHeight();
	$('a[href^=#]').click(function(){
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top-headerHight;
		$("html, body").animate({scrollTop:position}, 550, "swing");
		return false;
	});    
});

$(function () {
	var headerHight = $("固定ヘッダーのid名もしくはclass名").outerHeight();
	$(window).on('load', function() {
		var url = $(location).attr('href');
		if(url.indexOf("#") != -1){
			var anchor = url.split("#");
			var target = $('#' + anchor[anchor.length - 1]);
			if(target.length){
				var pos = Math.floor(target.offset().top) - headerHight;
				$("html, body").animate({scrollTop:pos}, 500);
			}
		}
	});
});

このように、2行目にてスマホの固定ヘッダーのid名もしくはclass名を記入することでページ内リンクは対応することができます。

そして別ページの特定の場所に移動させるための記述には13行目の

var headerHight = $("固定ヘッダーのid名もしくはclass名").outerHeight();

を追記してあげて、なおかつ20行目も

var pos = Math.floor(target.offset().top) - headerHight;

と数値ではなくheaderHightと書き換えてあげることで対応可能です(^-^)

まとめ

　急ぎ足になりましたが、以上が固定ヘッダーにて別ページの特定の場所に飛ばす時のjQueryの設定方法でした！

ちなみにPCでブラウザチェックをする際には、ブラウザ幅を狭めるだけではスマホサイト表示時もPCのjQueryが読み込まれるので、ブラウザ幅を狭めてスマホサイトの表示になった時に一回ブラウザを更新させる必要があることを忘れないようにしましょう…！

スポンサーリンク
TOP > jQuery > 【jQuery】固定ヘッダーにて別ページの特定の場所に飛ばすには？？
スポンサーリンク

ホームページ制作について

ホームページの制作依頼希望の方
はまず↓をクリック！ サービスの詳細

人気記事

CATEGORY

TAG

.htaccess Advanced Custom Fields Apple Watch CSSハック functions.php hoverアニメーション Mac metaタグ PHP アイキャッチ アイドル ウルトラレプリカ カスタムフィールド カスタム投稿 カテゴリー名 サイト制作 サーバー移転 ショートコード スラッグ ソーシャルボタン ターム チェックボックス テンプレートタグ デジモン ドラえもん ドロワーメニュー ビルド フォント プラグイン ページャー ランキング リダイレクト リーフラッシャー レスポンシブ レビュー 仮面ライダー 固定ヘッダー 固定ページ 固定ページテンプレート 抜粋 条件分岐 活動記録 端末判別 記事一覧 豆知識
検 索