jQueryの機能がスマホ端末/PC端末で反映しない場合が多々あるのを解決したい

以下のコードを作成したのですが、
jQueryのふわっと横から出る機能とボタンを押して下へスクロールする機能が
スマホ端末/PC端末でうまく機能しないです。記述ミスまたは囲い方に変なところがあれば
原因と解決策についてアドバイスを頂けますと幸いです。

動作がうまくできないブラウザチェックは現時点で
pc_macとsmp_iphone12proのChromeとsafariです。

この場合のうまくできない=
・ボタンの場合は押しても滑らかなスクロールにならない&スマホでは一部ボタンがタップしてもスクロールされない
・ふわっとしたエフェクトがかかったり、消えたり、端末によっては本来エフェクトがかかるはずのところが白飛びする場合もあります

html
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>テスト</title>
6<meta name="viewport" content="width=device-width">
7<meta name="description" content="テスト">
8
9<!-- Global site tag (gtag.js) - Google Analytics -->
10<script async src="https://www.googletagmanager.com/gtag/js?id=G-BKWQYP3TQT"></script>
11<script>
12  window.dataLayer = window.dataLayer || [];
13  function gtag(){dataLayer.push(arguments);}
14  gtag('js', new Date());
15
16  gtag('config', 'G-BKWQYP3TQT');
17</script>
18    
19    
20<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
21<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript">
22</script>
23<script src="https://unpkg.com/scrollreveal"></script>
24<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">
25		<link rel="stylesheet" href="css/reset.css">
26		<link rel="stylesheet" href="css/style.css">
27    <script>
28    $(function(){
29var headerHeight = $('header').outerHeight(); // ヘッダーについているID、クラス名など、余白を開けたい場合は + 10を追記する。
30var urlHash = location.hash; // ハッシュ値があればページ内スクロール
31if(urlHash) { // 外部リンクからのクリック時
32$('body,html').stop().scrollTop(0); // スクロールを0に戻す
33setTimeout(function(){ // ロード時の処理を待ち、時間差でスクロール実行
34  var target = $(urlHash);
35  var position = target.offset().top - headerHeight;
36  $('body,html').stop().animate({scrollTop:position}, 500); // スクロール速度ミリ秒
37}, 100);
38}
39$('a[href^=#]').click(function(){ // 通常のクリック時
40var href= $(this).attr("href"); // ページ内リンク先を取得
41var target = $(href);
42var position = target.offset().top - headerHeight;
43$('body,html').stop().animate({scrollTop:position}, 500); // スクロール速度ミリ秒
44return false; // #付与なし、付与したい場合は、true
45});
46});
47</script>
48    
49</head>
50
51	
52<body>
53<div class="container">
54<header id="smphead">
55<h1>
56テスト
57</h1>
58
59</header>
60<div class="conceptbox_pc">
61    <div class="conceptbox_bg">
62    <img src="img/simmLOGO_04_s.png" alt="テスト">
63    </div>
64     <div class="concept_kara">
65    <div class="concept1_pc">
66        
67<p>
68テスト
69
70<script>
71ScrollReveal().reveal('.concept1_pc p', { 
72  duration: 1600, 
73  origin: 'bottom', 
74  distance: '100px',
75  reset: true
76});
77</script>
78</p>
79        </div>
80        
81        <div class="concept1_smp">
82        
83<p>
84テスト
85<script>
86ScrollReveal().reveal('.concept1_smp p', { 
87  duration: 2400, 
88  origin: 'bottom', 
89  distance: '100px',
90  reset: true,
91  delay: 5
92});
93</script>
94</p>
95        </div>  
96    </div>
97
98<div class="itemlist">
99<ul class="list">				
100<li id="m_01"><a href="#1">
101<img src="img/sin_art.png" alt="テスト">
102<div class="mask">
103<div class="caption">テスト<br></div>
104</div><!-- mask/ -->
105</a>
106</li>
107
108<li id="m_01"><a href="#1">
109<img src="img/des_art.png" alt="テスト">
110<div class="mask">
111<div class="caption">テスト</div>
112</div><!-- mask/ -->
113</a>
114</li>
115
116<li><a href="#2">
117<img src="img/sim_art_05.png" alt="テスト">
118<div class="mask">
119<div class="caption">テスト</div>
120</div><!-- mask/ -->
121</a>
122</li>
123</ul>
124</div><!-- itemlist/ -->
125
126<div class="bottleimagebox" id="1">
127<div class="sin_bottle">
128<img src="img/sin_003.png" alt="テスト">
129<div class="pc_sin_title" id="1">
130<img src="img/sin_logo_white.png" alt="テスト">
131</div><!-- pc_sin_title/ -->
132
133<div class="pc_text_sin">
134<h2>テスト</h2>
135								<p>
136テスト
137<script>
138ScrollReveal().reveal('.pc_text_sin p', { 
139  duration: 1600, 
140  origin: 'left', 
141  distance: '50px',
142  reset: true
143});
144</script>
145</p>
146</div>
147</div><!-- pc_text_sin/ -->
148<div class="des_bottle">
149<img src="img/des_002.png" alt="テスト">
150
151<div class="pc_des_title">
152<img src="img/des_logo_white.png" alt="テスト">
153</div><!-- pc_des_title/ -->
154<div class="pc_text_des">
155<h2>テスト</h2>
156<p>テスト
157<script>
158ScrollReveal().reveal('.pc_text_des p', { 
159  duration: 1600, 
160  origin: 'left', 
161  distance: '50px',
162  reset: true
163});
164</script>
165
166</p>
167</div><!-- pc_text_des/ -->
168</div>
169</div><!-- bottleimagebox/ -->
170
171</div><!-- conceptbox_pc/ -->
172<div class="conceptbox"><!-- スマホサイト/ -->
173</div>
174
175<div class="setumeibox">
176<div class="sin_box">
177<div class="sin_title">
178<img src="img/sin_logo_white_01.png" alt="テスト">
179</div><!-- sin_title/ -->
180<div class="sin_item">
181<img src="img/sin_003.png" alt="テスト">
182</div><!-- sin_item/ -->
183
184<h2>テスト</h2>
185<p>テスト</p>
186</div><!-- sin_box/ -->
187
188<div class="des_box">
189<div class="des_title">
190<img src="img/des_logo_white_01.png" alt="テスト">
191</div><!-- des_title/ -->
192<div class="des_item">
193<img src="img/des_002.png" alt="テスト">
194</div><!-- des_itemスマホ/ -->
195
196<h2>テスト</h2>
197<p>テスト</p>
198
199</div><!-- des_boxスマホ/ -->
200</div><!-- setumeiboxスマホ/ -->
201    
202<div class="yam_container_1">
203<div class="yam_container_2" id="2">
204テスト
205</div><!-- yam_container_2/ -->
206<div class="yam_container_3">
207
208</div><!-- yam_container_3/ -->
209</div><!-- yam_container_1/ -->
210
211<div class="yam_container_1">
212<div class="yam_container_3">
213
214<div class="yam_container_7_pc">
215<img src="img/img_1248_dark.jpg" alt="テスト">
216<p>テスト</p>
217
218<script>
219ScrollReveal().reveal('.yam_container_7_pc', { 
220  duration: 1600, 
221  origin: 'left', 
222  distance: '50px',
223  reset: true
224});
225</script>
226</div><!-- yam_container_7_pc/ -->
227
228<div class="yam_container_7_smp">
229<img src="img/img_1248_dark.jpg" alt="テスト">
230<p>テスト</p>
231
232<script>
233ScrollReveal().reveal('.yam_container_7_smp', { 
234  duration: 1600, 
235  origin: 'left', 
236  distance: '50px',
237  reset: true
238});
239</script>
240</div><!-- yam_container_7_smp/ -->
241
242
243<div class="yam_container_6">
244<p>テスト
245<script>
246ScrollReveal().reveal('.yam_container_6 p', { 
247  duration: 1600, 
248  origin: 'left', 
249  distance: '50px',
250  reset: true
251});
252</script></p>
253
254</div><!-- yam_container_6/ -->
255</div><!-- yam_container_3/ -->
256
257</div><!-- yam_container_1/ -->
258
259<div class="shosai" id="2">
260<p>
261<a href="">
262</a>
263</p>
264<div class="shosai2" id="2">
265<p>
266<a href="">
267テスト
268</a>
269</p>
270</div><!-- shosai/ -->
271</div><!-- shosai/ -->
272
273
274
275    
276    <div class="yam_container_1">
277<div class="yam_container_2" id="2">
278テスト
279</div><!-- yam_container_2/ -->
280<div class="yam_container_3">
281
282</div><!-- yam_container_3/ -->
283
284</div><!-- yam_container_1/ -->
285
286<div class="yam_container_1">
287
288
289<div class="fan">
290<img src="img/comingsoon.jpg" alt="テスト">
291<script>
292ScrollReveal().reveal('.fan', { 
293  duration: 1600, 
294  origin: 'left', 
295  distance: '50px',
296  reset: true
297});
298</script>
299</div><!-- fan/ -->
300
301
302</div><!-- yam_container_1/ -->
303
304
305		<footer>
306テスト
307</footer>
308</div><!-- container/ -->
309</body>
310</html>

Googleブラウザコンソールに表示されてるエラー追記

Mixed Content: The page at 'https://〇〇.com/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.11.3.min.js'. This request has been blocked; the content must be served over HTTPS.
on_content_end.js:54 on_content_end ==>response to loadPagePattern, href=https://〇〇.com/, pattern.id=undefined
jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: a[href^=#]
    at Function.se.error (jquery.min.js:2)
    at se.tokenize (jquery.min.js:2)
    at se.select (jquery.min.js:2)
    at Function.se [as find] (jquery.min.js:2)
    at S.fn.init.find (jquery.min.js:2)
    at new S.fn.init (jquery.min.js:2)
    at S (jquery.min.js:2)
    at HTMLDocument.<anonymous> ((index):39)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

を削除したあとにGoogleコンソールに出たエラーの追記↓

Uncaught Error: Syntax error, unrecognized expression: a[href^=#]
    at Function.se.error (jquery.min.js:2)
    at se.tokenize (jquery.min.js:2)
    at se.select (jquery.min.js:2)
    at Function.se [as find] (jquery.min.js:2)
    at S.fn.init.find (jquery.min.js:2)
    at new S.fn.init (jquery.min.js:2)
    at S (jquery.min.js:2)
    at HTMLDocument.<anonymous> ((index):37)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

maisumakun

2021/02/15 01:17

ブラウザのコンソールにエラーなどは出ていませんか？

21120903ryosuke

2021/02/15 01:34

エラー追記いたしました。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
2<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript">

どのような理由でjQuery本体を複数読み込んでいるのでしょうか？あえて使い分ける場合を除いて、jQuery本体は1つだけにしましょう。

投稿2021/02/15 01:17

maisumakun

総合スコア145963

21120903ryosuke

2021/02/15 01:34

こちら<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>が不要ということでしょうか？Googleコンソールにてhttpsでないとだめのようなエラーがでているのですが、sをつける　ということではなく、そもそもダブってるこちらを削除する必要があるとの理解でよろしいでしょうか？

maisumakun

2021/02/15 01:38

> そもそもダブってるこちらを削除する必要があるとの理解でよろしいでしょうか？ jQueryの1系と3系、どちらを使いたいかで決めて、使う方だけ残してください（1.11.3を使いたいならhttpsに直す必要もあります）。複数読み込んで特に指示をしない場合、「後の」jQueryが使われることになりますが、あとの方がHTTPなので（読み込みに失敗すれば上のjQueryが生きる）、「環境によって使われるjQueryのバージョンが変化する」という不安定な状態となっています。

maisumakun

2021/02/15 01:39

あと、Syntax errorのほうは、セレクタをa[href^="#"]のように書き直す必要があります。

21120903ryosuke

2021/02/15 01:44

なるほどですねありがとうございます　入れ違いで<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript">を削除したエラーを追記させて頂いたのですが、このエラーがでるということは<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript">は有効なもので、sを追記し、<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>を削除してみますちなみにもしも両方読み込みたい場合は、コードを両方残しsを追記するのみで問題ございませんか？

maisumakun

2021/02/15 01:59

> ちなみにもしも両方読み込みたい場合は $.noConflict()を実行して両方のjQueryを取り出して使い分ける、ということをしない限り、複数読み込むことは全くの無駄です。

21120903ryosuke

2021/02/15 02:05

わかりました。現在<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>を削除しセレクタのタグを$('a[href^="#"]').click(function(){ // 通常のクリック時 var href= $(this).attr('a[href^="#"]'); // ページ内リンク先を取得のように記述したところ、ページを起動したときにページを起動してすぐに<li><a href="#2">へ勝手にスクロールされるようになってしまいました汗　記述ミスでしょうか？

行動規範の内容に同意します