https://shibuya-std.com/js/jQ.js

1// JavaScript Document
2
3
4jQuery(document).ready( function() {
5
6
7// SPドロップダウンメニュー SlickNav
8  $('#nav').slicknav({
9    label: '',
10    closeOnClick: 'true'
11  });
12
13
14// 電話番号
15  if (navigator.userAgent.match(/(iPhone|iPad|Android|Mobile)/)) {
16    $('.js-tel').each(function() {
17      var str = $(this).html();
18      if ($(this).children().is('img')) {
19        $(this).html($('<a>').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + '</a>'));
20      } else {
21        $(this).html($('<a>').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + '</a>'));
22      }
23    });
24  }
25
26
27
28  $('.slick_index_feature').slick({ //{}を入れる
29  autoplay: false, //「オプション名: 値」の形式で書く
30  dots: false, //複数書く場合は「,」でつなぐ
31  centerMode: true,
32  centerPadding: 'calc(50% - 205px)',
33  autoplay: true,
34  autoplaySpeed: 5000,
35  responsive: [{
36      breakpoint: 900,
37      settings: {
38      centerPadding: '30%',
39      }
40    },
41    {
42      breakpoint: 576,
43      settings: {
44      centerPadding: '10%',
45    }
46  }]
47});
48
49// トップ　お知らせ　アコーディオン
50  $('.index .news_body').hide();
51  $('.index .news_title').wrapInner('<a href="javascript:void(0);">');
52  $('.index .news_title').click(function(){
53    $(this).toggleClass("open").next('.index .news_body').slideToggle();
54  });
55  $('.index .news_title:nth-of-type(-n+3)').toggleClass("open").next('.index .news_body').slideToggle();
56
57
58// クリニック紹介ギャラリー slick ----------------------------------------
59
60$(".gallery_slider").each(function(){ // メイン画像
61  $(this).slick({
62    cssEase: 'linear', // 一定速度
63    dots: true, // インジケーター
64    fade: true,
65    speed: 500, // 切替時間
66    adaptiveHeight: true, // 内容によって高さ可変
67    asNavFor: "#" + $(this).attr("id") + "_nav" // 複数スライド対応
68  });
69});
70$(".gallery_thum").each(function(){ // サムネ
71  $(this).slick({
72    slidesToShow: 7,
73    slidesToScroll: 1,
74    centerMode: true,
75    centerPadding: 0,
76    arrows: false, // Prev/Next
77    cssEase: 'linear', // 一定速度
78    focusOnSelect: true, // クリックで切り替え
79    asNavFor: "#" + $(this).attr("id").replace("_nav", ""), // 複数スライド対応
80    responsive: [{
81      breakpoint: 575, // スマホの場合
82      settings: {
83        slidesToShow: 3,
84      },},
85    ]
86  });
87});
88$('.gallery').delay(50).css('visibility','visible');
89
90
91// PC 診療内容ドロップダウンメニュー
92  var windowWidth = $(window).width();
93  var windowSm = 576;
94  if (windowWidth >= windowSm) { // PCの場合
95    $('#nav .subnav').hide();
96    $('#nav .sub').click( function(event) {
97      $(this).toggleClass('open').next('#nav .subnav').css('visibility','visible').slideToggle();
98      $('#nav .sub').not($(this)).removeClass('open').next('#nav .subnav').css('display','none');
99    });
100  }
101
102
103
104// スムーズスクロール
105  $('.scr').click(function(){
106    var speed = 500;
107    var href= $(this).attr("href");
108    var target = $(href == "#" || href == "" ? 'html' : href);
109    var position = target.offset().top;
110    $("html, body").animate({scrollTop:position}, speed, "swing");
111    return false;
112  });
113
114
115  //pcヘッダー背景
116  $(window).scroll(function () {
117    if ($(this).scrollTop() > 80) {
118      $('#header').addClass('scrolled_header');
119    } else {
120      $('#header').removeClass('scrolled_header');
121    }
122  });
123
124});
125
126
127// ページアップ単体
128var up = $("#pageup");
129$(window).scroll(function () {
130  if ($(this).scrollTop() > 200) {
131    up.fadeIn();
132  } else {
133    up.fadeOut();
134  }
135});
136up.click(function () {
137  $("body, html").animate({ scrollTop: 0 }, 500);
138  return false;
139});
140
141// SPフッター固定　電話・ページアップ
142var f_fix = $(".tel_up").hide();
143$(window).scroll(function () {
144  if ($(this).scrollTop() > 200) {
145    f_fix.fadeIn().css('visibility', 'visible');
146  } else {
147    f_fix.fadeOut();
148  }
149});
150$('.pageup').click(function () {
151  $("body, html").animate({ scrollTop: 0 }, 500);
152  return false;
153});
154
155
156
157
158
159
160$(function(){
161  var st;
162  $('.slicknav_btn').on('click', function(){
163    setTimeout(function(){
164      if($('.slicknav_btn').hasClass("slicknav_open") == true) {
165        st = $(window).scrollTop();
166        $('html').addClass('scroll-prevent');
167        $('html').css('top', -(st) + 'px');
168      }
169      else {
170        $('html').removeClass('scroll-prevent');
171        //$(window).scrollTop(st);
172      }
173    }, 100);
174  });
175});
176
177

178// 以下、スクロールアニメ付与時に使用
179
180$(window).on('scroll', function (){
181
182  var scroll_trigger = $('.scroll_trigger');
183  var is_trigger_on = 'is_trigger_on';
184  
185  scroll_trigger.each(function () {
186  
187    var elemOffset = $(this).offset().top;
188    var scrollPos = $(window).scrollTop();
189    var wh = $(window).height();
190
191    if(scrollPos > elemOffset - wh + (wh / 3) ){
192      $(this).addClass(is_trigger_on);
193    }
194  });
195
196});
197
198
199$(function () {
200  var headerHeight = $("#header").outerHeight();;
201  $('a[href^="#anchor"]').click(function () {
202    if($(this).hasClass('slicknav_item')) {
203      return true;
204    }
205    var href = $(this).attr("href");
206    var target = $(href == "#" || href == "" ? "html" : href);
207    var position = target.offset().top;
208    var windowWidth = $(window).width();
209    var windowSm = 576;
210    if (windowWidth >= windowSm) { // PCの場合
211      position = position - headerHeight;
212    }
213    $("html, body").animate({ scrollTop: position }, 550, "swing");
214    return false;
215  });
216});
217
218$(window).on('load', function() {
219  window.setTimeout(function(){
220  var headerHeight = $("#header").outerHeight(); // ヘッダーの高さ
221  if (document.URL.match('#')) {
222      var str = location.href;
223      var cut_str = "#";
224      var index = str.indexOf(cut_str);
225      var href = str.slice(index);
226      var target = href;
227      var position = $(target).offset().top;
228      var windowWidth = $(window).width();
229      var windowSm = 576;
230      if (windowWidth >= windowSm) { // PCの場合
231        position = position - headerHeight;
232      }
233      $("html, body").scrollTop(position);
234    }
235  }, 250);
236  return false;
237});