https://tokyo-kiwanis.or.jp/_templates/sample/js/script.js

1// JavaScript Document
2(function($) {
3  // DOM読み込み時
4  $(function () {
5
6    // YouTube iframe をラップ
7    $("iframe[src*='youtube']").wrap('<div class="cms-temp-youtube" />');
8
9    // 特定のクラス以外の table をラップ
10    $("table")
11      .not(".two_column, .normal, .eventList, .calendar, .calendarTable, .eventDetail, .mailform-table")
12      .wrap('<div class="scroll_table" />');
13
14    // <a name> に id がない場合に id を付ける
15    $("a[name]:not([id])").each(function () {
16      const name = $(this).attr("name");
17      $(this).attr("id", name);
18    });
19
20    // ページ内リンククリック時、767px 以下でナビを閉じる
21    $(".navbar-nav a[href*='#']").on("click", function () {
22      if (window.innerWidth <= 767) {
23        $(".navbar-toggle").trigger("click");
24      }
25    });
26
27    // object-fit polyfill（ライブラリが読み込まれている前提）
28    if (typeof objectFitImages === "function") {
29      objectFitImages();
30    }
31  });
32
33  // ページロード後：ページトップボタン／スムーススクロール
34  $(window).on("load", function () {
35    const $topBtn = $(".pageTop");
36    $topBtn.hide();
37
38    $(window).on("scroll", function () {
39      if ($(this).scrollTop() > 100) {
40        $topBtn.fadeIn();
41      } else {
42        $topBtn.fadeOut();
43      }
44    });
45
46    // スムーススクロール処理（#のみ除外）
47    $('a[href*="#"]').on("click", function (e) {
48      const href = $(this).attr("href");
49      const hash = this.hash;
50      if (!hash || hash === "#" || href === "#" || href === "") return;
51
52      const $target = $(hash);
53      if ($target.length) {
54        e.preventDefault();
55        const position = $target.offset().top;
56        $("html, body").animate({ scrollTop: position }, 500);
57      }
58    });
59  });
60
61  // 背景画像切り替えと表示
62  $(window).on("load resize", function () {
63    const baseUrl = "/images/temp/";
64    const images = [
65      { url: baseUrl + "bg_header.png", selector: "#main_visual" },
66      { url: baseUrl + "bg_side.png", selector: ".top div#side" },
67      { url: baseUrl + "bg_right.png", selector: ".top div#right" }
68    ];
69
70    images.forEach(img => {
71      checkImageExists(img.url, function () {
72        $(img.selector).css({ backgroundImage: `url("${img.url}")` });
73      });
74    });
75
76    // フェードイン（遅延）
77    setTimeout(function () {
78      $("#main_visual").css({ opacity: 1 });
79      $(".top div#side").css({ opacity: 1 });
80      $(".top div#right").css({ opacity: 1 });
81    }, 50);
82  });
83
84  // 背景画像の存在確認関数
85  function checkImageExists(url, callback) {
86    const img = new Image();
87    img.onload = function () {
88      if (typeof callback === "function") {
89        callback();
90      }
91    };
92    img.src = url;
93  }
94
95})(jQuery);