web制作案件でよく使うjQuery（JavaScript）をまとめてみた。コピペOKです。

こんにちは！

Web制作でフリーランスをしている「はやた」と申します！

コーディングの仕事を受けるに当たって、今やjQuery（JavaScript）を使えることは必須です。

デザインカンプには当たり前にハンバーガーメニューやトップへ戻るボタン、モーダルが含まれています。

今回はWeb制作の案件を受ける上で、よく使うjQuery（JavaScript）をまとめてみます！

jQuery（JavaScript）を使ってできる実装

今回まとめたのは、プラグインなどを利用しないものだけです！

jsに関してはそのまま使えると思いますので、コピペして使っちゃってください！

トップへ戻る

HTML

　<div class="totop">
            <a href="#"><i class="fas fa-angle-up"></i></a>
        </div>
　

CSS

　
　.totop { 
    width: 10px;
    height: 60px;
    position: fixed;
    right: 63px;
    bottom: 40px;
    z-index: 10;
  }
　

js

　
　jQuery(function ($) {
   
  var pagetop = $(".totop");
  
    pagetop.hide();
  
    $(window).scroll(function(){
        if($(this).scrollTop() > 80) {
            pagetop.fadeIn(300);
        }else{
            pagetop.fadeOut(300);
        }
    });
  
    pagetop.click(function(){
        $("body , html").animate({scrollTop: 0 },500);
        return false;
    });
 });
　

このコードで実装すると、少しスクロールをするとトップへ戻るボタンが表示されるようになっています。

ページの一番上にいるときは表示する必要ないですからね！

スムーススクロール

スムーススクロールというのは、ボタンを押すと該当の場所までヌルッと移動する処理のことです。

1ページで完結するWebサイトだと良く使う処理です！

HTMLの処理ですが、aタグのhrefに移動したいタグのidを入れてください。

<a href="#id">

こんな感じです！

js

　
jQuery(function ($) {
　jQuery('a[href^="#"]').click(function() {
        
        // 移動速度を指定（ミリ秒）
        let speed = 300;
        // hrefで指定されたidを取得
        let id = jQuery(this).attr("href");
        // idの値が#のみだったらターゲットをhtmlタグにしてトップへ戻るようにする
        let target = jQuery("#" == id ? "html" : id);
        // ページのトップを基準にターゲットの位置を取得
        let position = jQuery(target).offset().top;
        // ターゲットの位置までspeedの速度で移動

        jQuery("html, body").animate(
          {
            scrollTop: position - $('#js-header').outerHeight()
          },
          speed
        );
        return false;
      });
 });
　

ヘッダーが追従するパターンが多いので、移動した際にヘッダー分の高さを空けて移動するような処理にしました。

その処理がいらない場合は、下記部分を削除してください。

　
　jQuery("html, body").animate(
          {
            scrollTop: position - $('#js-header').outerHeight()
          },
          speed
        );
　

ハンバーガーメニュー

ハンバーガーメニューには色々な形式のものがあるのですが、今回は横から出てくるパターンのものを紹介します！

HTML

　
<div class="menu_btn">MENU</div>
<div class="menu_btn2">CLOSE</div>
<div class="menu">
    <ul>
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
      <li>メニュー4</li>
      <li>メニュー5</li>
    </ul>
  </div>
  
　

css

　
.menu {
    transform: translateX(-100%); 
    transition: all .5s; 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F3F4F6;
    z-index: 9;
}

.active {
    transform: translateX(0);
}

.menu-btn {
    width: 100%;
    position: relative;
    height: 50px;
    z-index: 15;
    cursor: pointer;
}

.menu-btn2 {
    width: 100%;
    position: relative;
    height: 50px;
    z-index: 15;
    display: none;
    cursor: pointer;
}

.change {
    display: none;
}

.active-btn {
    display: block;
}

　

js

　
jQuery(function ($) {
      $(".menu-icon").click(function(){
        $(".menu").addClass("active");
        $(".menu-btn").addClass("change");
        $(".menu-btn2").addClass("active-btn");
        $("html,body").css("overflow" , "hidden");
        return false;
      });
      

      $(".menu-icon2").click(function(){
        $(".menu").removeClass("active");
        $(".menu-btn").removeClass("change");
        $(".menu-btn2").removeClass("active-btn");
        $("html,body").removeAttr("style");
        return false;
      }); 

    } );
　

このハンバーガーメニューは、画面外にメニューを隠しておいて、ボタンをクリックすることで画面内に戻ってくるという仕様になっています。

ボタンをクリックしてメニューが出てくると、メインコンテンツがスクロールしないようにhtmlとbodyにoverflow: hidden;を追加しています。

MENUとCLOSEについてはデザインしていないので、お好きにカスタマイズしてみてください！！

余談ですが、ハンバーガーメニューに関しては、「drawer.js」というめちゃくちゃ便利なプラグインがあるので、よくある三本線のアイコンを実装したい場合は一瞬でできるのでおすすめです！

「drawer.js」と調べてみてください！

色々な方が実装方法について説明してくれています！

モーダルウィンドウ

モーダルウィンドウは、ボタンを押すと別ウィンドウが表示されるというものです。

「詳しく」などのボタンを押すと、ふわっと説明する画面が出てくるのを見たことあるかと思います！

HTML

　
<a id="btn">btn</a>

<div class="modal js-modal">
   <div class="modal-bg js-modal-close"></div>
	 <div class="modal-body">
	　<a class="modal-close js-modal-close">×</a>
       モーダルの中身         
                    
   </div>
</div>
　

css

　
.modal  {
    background: rgba(255,255,255,0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: none;
}

.modal-bg{
    background: rgba(255,255,255,0.6);
    height: 100vh;
    position: absolute;
    width:100%;
}

.modal-body {
    background-color: #fff;
    width: 460px;
    height: 565px;
    margin:  auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

.modal-close {
    width: 10px;
    height: 10px;
    position: absolute;
    right: 20px;
    top: 17px;
    cursor: pointer;
}
　

js

　
　jQuery(function ($) {
  $("#btn").on('click' , function(){
    $("html,body").css("overflow" , "hidden");
    $(".js-modal").fadeIn();
    return false; //aタグの場合
    });
  $(".js-modal-close").on('click' , function(){
    $("html,body").removeAttr("style");
    $(".js-modal").fadeOut();
    return false;
  });
});
　

hover無効

レスポンシブ対応でコーディングをしていると、PC版でhover設定したものがスマホ版では邪魔になります。

cssでいちいち消すのもめんどくさいですよね。

そんなときに役に立つjsです。

　
var touch = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

if(touch) {
  try {
    for (var si in document.styleSheets) {
      var styleSheet = document.styleSheets[si];
      if (!styleSheet.rules) continue;

      for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
        if (!styleSheet.rules[ri].selectorText) continue;

        if (styleSheet.rules[ri].selectorText.match(':hover')) {
          styleSheet.deleteRule(ri);
        }
      }
    }
  } catch (ex) {}
}
　

このままコピペしてください！

まとめ

今回は僕が案件でよく使うjQuery（JavaScript）をまとめてみました！

この記事に書いてある処理は頻出なので、ぜひ自由に使えるようになってください！

自力でかけなくても、一度自分なりにカスタマイズしたものは、結構そのまま使えます。

自分なりに一度利用してみて自分のものにしてくださいね！