https://sh-clinic.jp/js/utils.js

1// JavaScript Document
2
3
4// スタイルシートの読み込みをページを読み込んだ後にしてレンダリングを早く
5//==========================================================================================
6/*
7// ページ上部のスクロールせずに見える範囲をHTMLにインラインで書いた上でそれ以外のCSSはレンダリング後に読み込む
8var cb = function() {
9  var l = document.createElement('link'); l.rel = 'stylesheet';
10  l.href = 'css/style.css';
11  var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
12};
13var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
14if (raf) raf(cb);
15else window.addEventListener('load', cb); */
16
17
18// ページ内スムーススクロール
19//==========================================================================================
20$(function () {
21  $('a[href^="#"]').click(function () {
22    var href = $(this).attr("href");
23    var target = $(href);
24    var tt = target.offset().top;
25    $('body,html').stop().animate({scrollTop: tt - 10}, 500, 'swing');
26  });
27
28  // $("a.smoothScrolls, .smoothScrolls a").not("a.noScrolls, .noScrolls a").click(function (e) {
29  //   e.preventDefault();
30  //   var tt = $($(this).attr("href")).offset().top;
31  //   $('html, body').animate({scrollTop: tt - 10}, 500, 'swing');
32  // });
33});
34
35
36// スマホのとき.telクラスをリンクでラップ
37//==========================================================================================
38if (navigator.userAgent.match(/(iPhone|Android|Mobile)/)) {
39  $('.tel, .tel2').each(function () {
40    var str = $(this).html();
41    if ($(this).children().is('img')) {
42      $(this).html($('<a class="link-tel">').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + '</a>'));
43    } else {
44      $(this).html($('<a class="link-tel">').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + '</a>'));
45    }
46  });
47}
48
49
50// ページトップへ戻るボタン
51//==========================================================================================
52jQuery(function ($) {
53  //トップへ戻るボタン
54  var topBtn = $('#page-top');
55  topBtn.hide();
56  //スクロールが200に達したらボタン表示
57  $(window).scroll(function () {
58    if ($(this).scrollTop() > 200) {
59      topBtn.fadeIn();
60    } else {
61      topBtn.fadeOut();
62    }
63  });
64  //スクロールしてトップ
65  topBtn.click(function () {
66    $('body,html').animate({
67      scrollTop: 0
68    }, 500);
69    return false;
70  });
71});
72
73
74// ドロップダウンメニュー
75//==========================================================================================
76jQuery(function ($) {
77  // SP ハンバーガー＆子階層アコーディオンメニュー
78  $('.toggleable').slicknav({
79    duration: 340,
80    closedSymbol: "&#9660;",
81    openedSymbol: "&#9650;",
82    label: ''
83  });
84});
85
86// PC CSSのみで実装
87// ただし、ページ読み込み時に一瞬表示されてしまうことがあるのでCSSでdisplay:none;にしてあるのをJSが読み込まれたらフェードインを指定しておき解除する
88$(window).on('load', function () {
89  // SPハンバーガー内の.subを含んでしまわないようにセレクタを工夫
90  $('.navbar .sub').addClass('load');
91});
92
93
94// フェードインの汎用トリガー
95//==========================================================================================
96jQuery(function ($) {
97  $(window).scroll(function () {
98
99    var elem = $('.js-fadeIn');
100
101    elem.each(function () {
102      var active = 'active';
103      var scrollPos = $(window).scrollTop();
104      var elemOffset = $(this).offset().top;
105      var wh = $(window).height();
106
107      if (scrollPos > elemOffset - wh + (wh / 6)) {
108        // 画面の下から1/6の位置まできたら発動
109        $(this).addClass(active);
110      }
111    });
112  });
113  $(window).scroll(); // ファーストビューに該当要素が入っている場合に即時に呼び出す
114});