別ページへのアンカーリンクがうまくいかない

遷移先ページへ以下を記述する

$(window).load(function () {
  var lochref = window.location.href;
  if (lochref.indexOf("#") > -1) {
    var anchor = lochref.slice(lochref.indexOf("#"));
    window.setTimeout(function () {
      $("body, html").animate(
        {
          scrollTop: $(anchor).offset().top,
        },
        1
      );
    }, 1);
  }
});

よくある質問

/* ===============================================
  # faq
  =============================================== */

jQuery(function ($) {
  $(".question").on("click", function () {
    /*クリックでコンテンツを開閉*/
    $(this).next().slideToggle(200);
    /*矢印の向きを変更*/
    $(this).toggleClass("open", 200);
  });
});

100vhスクロールしたらclass付与

$(window).scroll(function() {
        var height = $(window).height();
        if ($(window).scrollTop() > height) {
            $('header').addClass('is-show');
        } else {
            $('header').removeClass('is-show');
        }
    });

タブ

HTML

<div class="tab-area">
 <div class="tab active">
   タブ1
 </div>
 <div class="tab">
   タブ2
 </div>
 <div class="tab">
   タブ3
 </div>
</div>
<div class="content-area">
 <div class="content show">
   タブ1コンテンツ
 </div>
 <div class="content">
   タブ2コンテンツ
 </div>
 <div class="content">
   タブ3コンテンツ
 </div>
</div>

SCSS

.tab-area {
  display: flex;
  .tab {
    align-items: center;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
  .tab.active {
    background-color: #000;
    color: #fff;
  }
}
.content-area {
  .content {
    display: none;
  }
  .content.show {
    display: block;
  }
}

jQuery

$(function () {
  let tabs = $(".tab");
  $(".tab").on("click", function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    const index = tabs.index(this);
    $(".content").removeClass("show").eq(index).addClass("show");
  });
});

パラメータを外部に引き継ぐ方法

domainsToDecorateにドメイン名を書き、

queryParamsに引き継ぎたいパラメータを書くだけ。

<script>
(function() {
  var domainsToDecorate = [
          'domain1.com', //add or remove domains (without https or trailing slash)
          'domain2.net'
      ],
      queryParams = [
          'utm_medium', //add or remove query parameters you want to transfer
          'utm_source',
          'utm_campaign',
          'something_else'
      ]
  // do not edit anything below this line
  var links = document.querySelectorAll('a'); 

// check if links contain domain from the domainsToDecorate array and then decorates
  for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
      for (var domainIndex = 0; domainIndex < domainsToDecorate.length; domainIndex++) { 
          if (links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 && links[linkIndex].href.indexOf("#") === -1) {
              links[linkIndex].href = decorateUrl(links[linkIndex].href);
          }
      }
  }
// decorates the URL with query params
  function decorateUrl(urlToDecorate) {
      urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
      var collectedQueryParams = [];
      for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
          if (getQueryParam(queryParams[queryIndex])) {
              collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
          }
      }
      return urlToDecorate + collectedQueryParams.join('&');
  }

  // borrowed from https://stackoverflow.com/questions/831030/
  // a function that retrieves the value of a query parameter
  function getQueryParam(name) {
      if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(window.location.search))
          return decodeURIComponent(name[1]);
  }

})();
</script>

動画オリジナルコントローラー

<video id="video01" src="movie.mp4" autoplay muted loop controls playsinline></video>
<div class="control">
<divid="play" class="hidden"><iclass="fa fa-play"></i></div>
<divid="stop"><iclass="fa fa-pause"></i></div>
<divid="mute"><iclass="fa fa-volume-off"></i><iclass="fa fa-volume-up hidden"></i></div>
</div>
<!-- /.control -->
    $(function() {
        // 操作対象のvideoを指定
        var video = $('#video01').get(0);
        // 動画の再生 
        $('#play').click(function() {
            $('#play').addClass('hidden');
            $('#stop').removeClass('hidden');
            video.play();
        });
        // 動画の一時停止
        $('#stop').click(function() {
            $('#play').removeClass('hidden');
            $('#stop').addClass('hidden');
            video.pause();
        });
        // 動画の頭出し(任意の秒へ移動)
        $('#atama').click(function() {
            video.currentTime = 0; // 入れた秒の位置へ移動(例は0秒)
        });
        // 音声ミュート(トグル式)
        $('#mute').click(function() {
            if (video.muted) {
                video.muted = false;
                $('#mute .fa-volume-off').addClass('hidden');
                $('#mute .fa-volume-up').removeClass('hidden');
            } else {
                video.muted = true;
                $('#mute .fa-volume-off').removeClass('hidden');
                $('#mute .fa-volume-up').addClass('hidden');
            }
        });
        //音量アップ
        $('#vol-up').click(function() {
            if (video.volume &lt;= 0.75) {
                video.volume = video.volume + 0.25;
                $("#vol").text(video.volume);
            }
        });
        //音量ダウン
        $('#vol-down').click(function() {
            video.volume = video.volume - 0.25;
            $("#vol").text(video.volume);
        });
        //音量表示
        $("#vol").text(video.volume);
    });