IEでjavascriptが動きません。。
ChromeとSafariでは正常に動作します。
お分かりになる詳しい方がいらっしゃいましたらよろしくお願いします。。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"/> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <meta name="description" content="割愛"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <title>割愛</title> 9 <link href="style.css" rel="stylesheet"> 10</head> 11<body> 12割愛 13</body> 14<script src="jquery-3.4.1.min.js"></script> 15<script src="main.js"></script> 16
JavaScript
1'use strict'; 2{ 3 //query,ID,class取得 4 const body = document.querySelector("body"); 5 const head = document.getElementById('head') 6 const headLogo = document.getElementById('headLogo'); 7 const menuWrapper = document.getElementById('menuWrapper'); 8 const menuButton = document.getElementById('menuButton'); 9 const nav = document.getElementById('nav'); 10 const moveTop = document.getElementById('moveTop'); 11 const moveAbout = document.getElementById('moveAbout'); 12 const moveProduct = document.getElementById('moveProduct'); 13 const moveContact = document.getElementById('moveContact'); 14 15 //ページ読み込み時処理 16 window.onload = function(){ 17 //画面をゆっくり明るくする 18 head.classList.remove('before'); 19 head.classList.add('after'); 20 //ロゴをゆっくり表示 21 headLogo.classList.remove('logoHide'); 22 headLogo.classList.add('after'); 23 } 24 25 //読み込み時とリサイズ時、高さを画面いっぱいにする 26 $(function () { 27 $("#head").css("height",$(window).outerHeight()); 28 $(window).resize(function(){ 29 $("#head").css("height",$(window).outerHeight()); 30 }); 31 }); 32 33 //ハンバーガーボタンのアニメーション処理 34 document.addEventListener('DOMContentLoaded', function () { 35 menuButton.addEventListener('click', function (ev) { 36 ev.preventDefault(); 37 this.classList.toggle('active'); 38 }); 39 }); 40 41 //メニューボタン押下時処理 42 menuWrapper.addEventListener('click', function (event) { 43 //メニューが隠れている場合 44 if (nav.classList.contains('close')){ 45 //メニューを開く 46 nav.classList.remove('close'); 47 nav.classList.add('open'); 48 //背景を固定する 49 body.classList.add('fixed'); 50 //メニュー表示中の場合 51 } else { 52 //メニューを閉じる 53 nav.classList.add('close'); 54 nav.classList.remove('open'); 55 //背景固定を解除 56 body.classList.remove('fixed'); 57 } 58 }); 59 60 //スクロール処理 61 $(function(){ 62 // #で始まるリンクをクリックしたら実行されます 63 $('a[href^="#"]').click(function() { 64 // スクロールの速度 65 var speed = 300; // ミリ秒で記述 66 var href= $(this).attr("href"); 67 var target = $(href == "#" || href == "" ? 'html' : href); 68 var position = target.offset().top; 69 $('body,html').animate({scrollTop:position}, speed, 'swing'); 70 return false; 71 }); 72 }); 73 74 /********** サブメニュー処理ここから **********/ 75 //Top押下時処理 76 moveTop.addEventListener('click', () => { 77 nav.classList.add('close');//メニューを閉じる 78 body.classList.remove('fixed');//背景固定を解除 79 menuButton.classList.remove('active');//メニューボタンを戻す 80 }); 81 82 //about押下時処理 83 moveAbout.addEventListener('click', () => { 84 nav.classList.add('close');//メニューを閉じる 85 body.classList.remove('fixed');//背景固定を解除 86 menuButton.classList.remove('active');//メニューボタンを戻す 87 }); 88 89 //Servive押下時処理 90 moveProduct.addEventListener('click', () => { 91 nav.classList.add('close');//メニューを閉じる 92 body.classList.remove('fixed');//背景固定を解除 93 menuButton.classList.remove('active');//メニューボタンを戻す 94 }); 95 96 //Contact押下時処理 97 moveContact.addEventListener('click', () => { 98 nav.classList.add('close');//メニューを閉じる 99 body.classList.remove('fixed');//背景固定を解除 100 menuButton.classList.remove('active');//メニューボタンを戻す 101 }); 102 /********** サブメニュー処理ここまで **********/ 103} 104
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/08 06:16
退会済みユーザー
2019/09/08 06:17