https://blanc-dental.jp/wp/wp-content/themes/system-professional/js/main.js

1let headerHeight;
2let scrollPosition;
3
4const mediaQueryList = window.matchMedia('(min-width: 640px)'); // Breakpoint
5mediaQueryList.addEventListener("change", listener); // regist listener
6listener(mediaQueryList); //読み込み時に実行
7
8function listener(event) {
9  if (event.matches) {
10    headerHeight = jQuery('header').innerHeight();
11    scrollPosition = 90;
12    
13    jQuery("body , .nav_wrap *").removeClass('nav-open , active');
14    jQuery('.pulldown_box , .mega_box').slideUp(0);
15    jQuery('.pagetop').css("display", 'block');
16
17    if (jQuery(window).scrollTop() > headerHeight) {
18      jQuery('.nav_wrap').addClass('fixed');
19    }
20
21  } else {
22    headerHeight = jQuery('header').innerHeight();
23    scrollPosition = 70;
24
25    jQuery('.nav_wrap').removeClass('fixed');
26    jQuery('.nav_wrap').css("left", 0);
27    jQuery('.mega_box , .pulldown_box').css("display", 'none');
28    jQuery('.pagetop').css("display", 'none');
29
30    if (jQuery(window).scrollTop() > headerHeight) {
31      jQuery('.pagetop').css("display", 'block');
32    }
33  }
34}
35
36
37/******************************
38アコーディオン
39******************************/
40jQuery(function () {
41  jQuery(".accordion dl dt").click(function () {
42    jQuery(this).toggleClass("open");
43    jQuery(this).next().stop().slideToggle(300);
44  });
45});
46
47
48/******************************
49タブ
50******************************/
51//１番目のタブを表示するように初期化
52jQuery(document).ready(function(){
53  jQuery('.tab_wrap .tab1').addClass('active');
54  jQuery('.tab_wrap .panel1').addClass('active').show();
55});
56
57jQuery(function(){
58  jQuery('.tab').on('click',function(){
59    var idx = jQuery(this).index();
60    jQuery(this).addClass('active').siblings('.tab').removeClass('active');
61    jQuery(this).parent().siblings('.panel_wrap').children('.panel').eq(idx).addClass('active').fadeIn(200).siblings('.panel').removeClass('active').hide();
62  });
63});;
64
65
66/******************************
67telリンク処理
68******************************/
69jQuery(function() {
70  var ua = navigator.userAgent.toLowerCase();
71  var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);
72
73  if (!isMobile) {
74    jQuery('a[href^="tel:"]').on('click', function(e) {
75      e.preventDefault();
76    });
77  }
78});
79
80
81/******************************
82pagetop
83******************************/
84topFlag = true;
85jQuery('.pagetop').click(function () {
86  if (jQuery(window).scrollTop() > headerHeight) {
87    if(topFlag){
88      topFlag = false;
89      jQuery('body,html').animate({ scrollTop: 0 }, 500, 'swing');
90
91      setTimeout(function () {
92        topFlag = true;
93      }, 600);
94
95    }
96  }
97});
98
99jQuery(window).on("scroll", function () {
100  if (window.matchMedia('(max-width: 640px)').matches) {
101    if (jQuery(window).scrollTop() > headerHeight) {
102      jQuery('.pagetop').fadeIn(150);
103    } else {
104      jQuery('.pagetop').fadeOut(150);
105    }
106  }
107});
108
109
110/******************************
111headerに.fixedを付与、横スクロールに対応
112******************************/
113let nav = jQuery('.nav_wrap');
114jQuery(window).on("scroll", function () {
115  if (window.matchMedia('(min-width: 640px)').matches) {
116    if (jQuery(this).scrollTop() > headerHeight) {
117      nav.addClass('fixed');
118      jQuery(".fixed").css("left", -jQuery(window).scrollLeft());
119    } else {
120      nav.removeClass('fixed');
121      nav.css("left", 0);
122    }
123  }
124});
125
126
127/******************************
128MegaMenu
129******************************/
130jQuery(function () {
131  const mega = jQuery(".mega");
132  let megaTarget;
133  let posiiton;
134  let flag = true;
135  
136  jQuery(mega).on('mouseenter', (event) => {
137    if (window.matchMedia('(min-width: 640px)').matches) {
138      megaTarget = event.currentTarget;
139      posiiton = jQuery(megaTarget).offset().left;
140      jQuery(megaTarget).find('.mega_box').stop().fadeIn(200);
141    }
142  })
143
144  jQuery(mega).on('mouseleave', (event) => {
145    if (window.matchMedia('(min-width: 640px)').matches) {
146      jQuery(megaTarget).find('.mega_box').stop().fadeOut(200);
147    }
148  })
149  
150  //SP時はアコーディオン
151  jQuery(mega).find('.open_btn').on('click', function () {
152      jQuery(this).toggleClass('active');
153      if (jQuery(this).hasClass('active')) {
154        jQuery(this).prev('.mega_box').stop().slideDown(300);
155      } else {
156        jQuery(this).prev('.mega_box').stop().slideUp(300);
157      }
158  });
159});
160
161
162/******************************
163PullDown
164******************************/
165jQuery(function () {
166  const pulldown = jQuery(".pulldown");
167  let pullTarget;
168  
169  jQuery(pulldown).on('mouseenter', (event) => {
170    if (window.matchMedia('(min-width: 640px)').matches) {
171      pullTarget = event.currentTarget;
172    jQuery(pullTarget).find('.pulldown_box').stop().fadeIn(200);
173    }
174  })
175
176  jQuery(pulldown).on('mouseleave', (event) => {
177    if (window.matchMedia('(min-width: 640px)').matches) {
178      jQuery(pullTarget).find('.pulldown_box').stop().fadeOut(200);
179    }
180  })
181
182  //SP時はアコーディオン
183  jQuery(pulldown).find('.open_btn').on('click', function () {
184    jQuery(this).toggleClass('active');
185    if (jQuery(this).hasClass('active')) {
186      jQuery(this).prev('.pulldown_box').stop().slideDown(300);
187    } else {
188      jQuery(this).prev('.pulldown_box').stop().slideUp(300);
189    }
190  });
191});
192
193jQuery(function () {
194  // リンクをタップしたらナビを閉じる（スマホ）
195  jQuery('.menu_list_wrap a').on('click' , function(){
196    jQuery('.btn_menu').toggleClass('active');
197    jQuery('body').toggleClass('nav-open')
198  });
199});
200
201
202/******************************
203ハンバーガーメニュー
204******************************/
205jQuery(function () {
206  //メニューの開閉
207  jQuery(document).on('click', '.btn_menu', function(){
208    jQuery('.btn_menu').toggleClass('active');
209    jQuery('body').toggleClass('nav-open')
210  });
211
212  // メニュー外をタップした時に閉じる
213  jQuery('.nav_overlay').on('click', function(){
214    jQuery('.btn_menu').toggleClass('active');
215    jQuery('body').toggleClass('nav-open');
216  });
217});
218
219
220/******************************
221スムーススクロール
222******************************/
223let currentUrl = location.href.split('#')[0]; //現在のページ
224
225// ページ内のアンカーへスクロール
226jQuery(document).on("click", 'a[href*="#"]', function () {
227  let targetUrl = jQuery(this).prop('href');
228
229  if (targetUrl.split('#')[0] === currentUrl) {
230    var target = jQuery(this.hash === '' ? 'html' : this.hash);
231    var position = target.offset().top - scrollPosition;
232    if (target.length) {
233      jQuery('html, body').animate({ scrollTop: position }, 500, 'swing');
234    }
235  }
236});
237
238//ページ外のアンカーへスクロール
239jQuery(window).on('load', function () {
240  let urlHash = location.hash;
241  if (urlHash) {
242    var target = jQuery(urlHash);
243    var position = target.offset().top - scrollPosition;
244  
245    jQuery('body,html').stop().scrollTop(position - 100);
246    setTimeout(function () {
247      jQuery('body,html').stop().animate({ scrollTop: position }, 500, 'swing');
248    }, 700);
249  }
250});