https://www.shiki-no-sato.com/common/js/setting_option.js

1/* --------------------------------------------------------
2	[Setting Option] ※全ページに関わるものだけ記載
3-------------------------------------------------------- */
4$(document).ready(function() {
5	/* 電話番号へのリンク指定
6	   PC     →  「span」で囲む (リンクにしない)
7	   スマホ  →  「class="tel-link"」をつけたリンク
8	-------------------------------------------------------- */
9	if(!navigator.userAgent.match(/(iPhone|iPad|Android)/)){
10		$("a.tel-link").each(function(){
11			$(this).replaceWith('<span class="tel-link">' + $(this).html() + '</span>');
12		});
13	}
14
15	/* スムーススクロール
16	-------------------------------------------------------- */
17	$('a[href^="#"]:not(.nosmooth)').click(function(){
18		var speed = 500;
19		var href= $(this).attr("href");
20		var target = $(href == "#" || href == "" ? 'html' : href);
21		var hHeight = '';
22
23		/* ▽ 固定ヘッダーありの場合の処理 ▽ */
24		// ヘッダー固定が解除されるウィンドウ幅
25		var hFixSize = window.matchMedia('(max-width: 600px)');
26		// 固定ヘッダーの高さ
27		if(!hFixSize.matches) {
28		// 固定ヘッダー（ #header_wrap の箇所は固定ヘッダーのid名に合わせてください ）
29		hHeight = $('#nav_wrap').outerHeight() + 0;
30		}
31		/* △ 固定ヘッダーありの場合の処理 ▽ */
32
33		var position = target.offset().top - hHeight;
34		$("html, body").animate({scrollTop:position}, speed, "swing");
35		return false;
36	});
37
38/* ----- Setting End ----------------------------------- */
39});
40
41// ページが完全に読み込まれたら実行
42$(window).on('load',function(){
43	/* object-fit IE対応
44	-------------------------------------------------------- */
45	objectFitImages('.ofi', {watchMQ: true});
46
47	/* 予約番
48	-------------------------------------------------------- */
49	var search_date = $('#search_489ban input[name="date"]');
50	search_date.datepicker({
51		dateFormat: 'yy/mm/dd',
52		showButtonPanel: true,
53		showAnim: 'slideDown'
54	});
55
56	/* グローバルナビ途中から上部固定にする
57		※最初から一番上にくっついてる場合はこのjsいらないので消してください。
58	-------------------------------------------------------- */
59	var nav = $('#nav_wrap');						// 固定するナビ領域
60	var con = $('#search_wrap');	// ナビ領域の次の要素（ナビがfixedになった時に位置がずれないように上にpaddingを確保する要素）
61	var navTop = nav.offset().top;	// 固定するナビまでの高さを算出
62	var navHeight = $("#nav_wrap").height(); // nav_wrap の高さを取得
63	var storeNav = 600;							// ナビ固定を解除するウィンドウ幅
64	function navFix() {
65		if($(this).scrollTop() >= navTop && $(window).width() > storeNav) {
66			if(!nav.hasClass('fixed')) {
67				nav.addClass('fixed');	// fixed クラスを追加
68				con.css('padding-top', parseInt(con.css('padding-top'))+parseInt(navHeight)+'px');	// コンテンツ領域上部にgnav分の余白を確保
69			}
70		} else if(nav.hasClass('fixed')) {
71			nav.removeClass('fixed').css('top','');
72			con.css('padding-top','');
73		}
74	}
75	navFix();
76
77	//リサイズ時の処理
78	$(window).on('resize', function() {
79		if(nav.hasClass('fixed')) {
80			if(navTop != con.offset().top) {
81				navTop = con.offset().top;
82			}
83		} else if(navTop != nav.offset().top) {
84			navTop = nav.offset().top;
85		}
86		navFix();
87	});
88
89	//スクロール時の処理
90	$(window).scroll(function () {
91		var winTop = $(this).scrollTop();
92		navFix();
93		if(nav.hasClass('fixed')){
94			//fixedの際に横スクロールする処理
95			nav.css("left", -$(window).scrollLeft());
96		}
97	});
98
99
100	/* ページトップへ戻るをフェードインで表示
101	-------------------------------------------------------- */
102	// var fade_pos = 200; // このpx分スクロールしたらpagetopを表示させる
103	//
104	// // bodyのid名でfadeInするタイミングを変更することができます
105	// if($('body').attr('id') == 'home') {
106	// 	// bodyのid名がhomeだったら500pxスクロールでpagetop表示
107	// 	fade_pos = 500;
108	// }
109	//
110	// if ($(this).scrollTop() <= fade_pos) {
111	// 	$("#pagetop").css({"display":"none"});
112	// }
113	// $(window).on('scroll',function() {
114	// 	if ($(this).scrollTop() > fade_pos) {
115	// 		$('#pagetop').fadeIn(500);
116	// 	} else {
117	// 		$('#pagetop').fadeOut(500);
118	// 	}
119	// });
120
121
122	/* アコーディオンメニュー
123	-------------------------------------------------------- */
124	var accTrigger = $('.acc_tit'),
125			accSpSize = window.matchMedia('(max-width: 600px)');
126	const accChange = function() {
127		accTrigger.each(function() {
128			if($(this).attr('data-size')){
129				if(accSpSize.matches && $(this).attr('data-size') == 'sp') {
130					// 600px以下でアコーディオンにしたい時はこっち
131					$(this).next().addClass('acc_contents').hide();
132					return true;
133				}
134
135				$(this).next().css('display','').removeClass('acc_contents');
136			}
137		});
138	}
139	accSpSize.addListener(accChange);
140	accChange();
141	$('.acc_contents').hide();
142	$('.acc_tit').on("click",function(){
143		var acc = $(this);
144		acc.toggleClass("active").next(".acc_contents").slideToggle(300);
145	});
146
147
148	/* 別ページから特定ID箇所へ移動するときに固定ヘッダー分位置をずらす
149	 * aタグのリンクを下記のように設定してください。
150	 * <a href="hoge/?id=id名">hogehoge</a>
151	-------------------------------------------------------- */
152	// urlパラメータの取得
153	var moveArg = new Object;
154	var movePrm = location.search.substring(1).split('&');
155	var moveFlg = false;

156	for(var i=0 ; movePrm[i] ; i++) {
157		var kv = movePrm[i].split('=');
158		moveArg[kv[0]]=kv[1];
159
160		if(kv[0] == 'id') {
161			moveFlg = true;
162		}
163	}
164
165	if( moveFlg ) {
166		var target = $('#' + moveArg['id']);
167		var hHeight = '';
168
169		/* ▽ 固定ヘッダー有りの場合の処理 ▽ */
170		// ヘッダー固定が解除されるウィンドウ幅
171		var hFixSize = window.matchMedia('(max-width: 600px)');
172		// 固定ヘッダーの高さ
173		if(!hFixSize.matches) {
174			// 固定ヘッダー（ #header_wrap の箇所は固定ヘッダーのid名に合わせてください ）
175			hHeight = $('#header_wrap').outerHeight() + 20;
176		}
177		/* △ 固定ヘッダー有りの場合の処理 △ */
178
179		var position = target.offset().top - hHeight;
180		$("html, body").animate({scrollTop:position}, 500, "swing");
181	}
182
183
184/* ----- Setting End ----------------------------------- */
185});