個人的によく使う定番のJQuery

こんにちは。Webデザイナーのふくだです。
デザインだけでなく、コーディングをする機会も多いので備忘録として個人的によく使うJQueryをまとめてみました。

■スムーズスクロール

$(function () {

 $('a[href^="#"]').click(function () {
   var speed = 500;
   var href = $(this).attr("href");
   var target = $(href == "#" || href == "" ? 'html' : href);
   var position = target.offset().top;
   $("html, body").animate({ scrollTop: position }, speed, "swing");
   return false;
 });

});

■タブ

$(function () {

 $('.tab__item').click(function () {
   $('.is-active').removeClass('is-active');
   $(this).addClass('is-active');
   $('.is-show').removeClass('is-show');

   const index = $(this).index();
   $('.tab__content').eq(index).addClass('is-show');
 });

});

■ドロップダウン

$(function () {

 $('.Gnav__item').hover(function () {
   $("ul:not(:animated)", this).slideDown(300);
 }, function () {
   $("ul.dropDown", this).slideUp(300);
 });

});

■ハンバーガーメニュー

$(function () {

 $('.spMenu').off('click');

 $('.spMenu').on('click', function () {
   // メニュー表示/非表示
   $(".navGlobal").stop().slideToggle();
   $('.spMenu span').toggleClass('is-open');
   return false;
 });

});

■スクロールしたらシリーズ

●スクロールしたらフェードインで表示

$(function () {

 $(".pageTop").hide();
 $(window).scroll(function () {
   if ($(this).scrollTop() > 100) {
     $('.pageTop').fadeIn();
   } else {
     $('.pageTop').fadeOut();
   }
 });

});

●スクロールしたらスライドで表示

$(function () {

 var showFlag = false;
 var topBtn = $('.pageTop');
 topBtn.css('bottom', '-100px');
 var showFlag = false;

 //スクロールが100に達したらボタン表示
 $(window).scroll(function () {
   if ($(this).scrollTop() > 100) {
     if (showFlag == false) {
       showFlag = true;
       topBtn.stop().animate({
         'bottom': '50px'
       }, 200);
     }
   } else {
     if (showFlag) {
       showFlag = false;
       topBtn.stop().animate({
         'bottom': '-100px'
       }, 200);
     }
   }
 });

});

●スクロールしたらClassを追加

$(function () {

 var $header = $('#header');

 $(window).scroll(function () {
   if ($(window).scrollTop() > 100) {
     $header.addClass('header__navi');
   } else {
     $header.removeClass('header__navi');
   }
 });

});