teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問WPでのページ外アンカーリンクが動かない

編集履歴

質問編集履歴

3

コンソールログについて追記いたしました。

2019/11/25 09:09

投稿

nmnm
nmnm

スコア5

test CHANGED
File without changes
test CHANGED
@@ -285,3 +285,157 @@
285
285
  に原因があると表示されます。
286
286
 
287
287
  確認ミス申し訳ございません。
288
+
289
+
290
+
291
+ ご連絡遅くなってしまい申し訳ございません。
292
+
293
+ 貼っていただいたURLでjsを記述し
294
+
295
+ ヘッダーのリンク頭に<?php echo esc_url(home_url( '/' )); ?>を追加、
296
+
297
+ 以下のようにしました。
298
+
299
+ ```ここに言語を入力
300
+
301
+ $(document).ready(function(){
302
+
303
+ //URLのハッシュ値を取得
304
+
305
+ var urlHash = location.hash;
306
+
307
+ console.log(urlHash); //デバッグしてみる
308
+
309
+ //ハッシュ値があればページ内スクロール
310
+
311
+ if(urlHash) {
312
+
313
+ //スクロールを0に戻しておく
314
+
315
+ $('body,html').stop().scrollTop(0);
316
+
317
+ setTimeout(function () {
318
+
319
+ //ロード時の処理を待ち、時間差でスクロール実行
320
+
321
+ scrollToAnker(urlHash) ;
322
+
323
+ }, 100);
324
+
325
+ }
326
+
327
+
328
+
329
+ //通常のクリック時
330
+
331
+ $('a[href*="#"]').click(function() {
332
+
333
+ //ページ内リンク先を取得
334
+
335
+ var href= $(this).attr("href");
336
+
337
+ //リンク先が#か空だったらhtmlに
338
+
339
+ var hash = href == "#" || href == "" ? 'html' : href;
340
+
341
+ //スクロール実行
342
+
343
+ scrollToAnker(hash);
344
+
345
+ return false;
346
+
347
+ });
348
+
349
+
350
+
351
+ // 関数：スムーススクロール
352
+
353
+ // 指定したアンカー(#ID)へアニメーションでスクロール
354
+
355
+ function scrollToAnker(hash) {
356
+
357
+ var target = $(hash);
358
+
359
+ var position = target.offset().top;
360
+
361
+ $('body,html').stop().animate({scrollTop:position}, 500,'swing');
362
+
363
+ }
364
+
365
+ })
366
+
367
+
368
+
369
+ ```
370
+
371
+ ```
372
+
373
+ <li><a href="<?php echo esc_url(home_url( '/' )); ?>#hoge">hoge</a></li>
374
+
375
+ <li><a href="<?php echo esc_url(home_url( '/' )); ?>#fuga">fuga</a></li>
376
+
377
+ ```
378
+
379
+ ページ内、ページ外アンカーリンクは実装されました！ありがとうございます。
380
+
381
+ ですがページ内リンクでのスムーススクロールが実行されません。
382
+
383
+ console.log(urlHash);もページ外リンクでは#hoge、#fugaが表示されますが
384
+
385
+ topページだと何も表示されなくなってしまい以下のようなエラーが出ます。
386
+
387
+ ```ここに言語を入力
388
+
389
+ jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: http://localhost/jver/#hoge
390
+
391
+ at Function.se.error (jquery.min.js:2)
392
+
393
+ at se.tokenize (jquery.min.js:2)
394
+
395
+ at se.select (jquery.min.js:2)
396
+
397
+ at Function.se [as find] (jquery.min.js:2)
398
+
399
+ at k.fn.init.find (jquery.min.js:2)
400
+
401
+ at new k.fn.init (jquery.min.js:2)
402
+
403
+ at k (jquery.min.js:2)
404
+
405
+ at scrollToAnker ((index):58)
406
+
407
+ at HTMLAnchorElement.<anonymous> ((index):51)
408
+
409
+ at HTMLAnchorElement.dispatch (jquery.min.js:2)
410
+
411
+ ```
412
+
413
+ ```ここに言語を入力
414
+
415
+ jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: http://localhost/jver/#fuga
416
+
417
+ at Function.se.error (jquery.min.js:2)
418
+
419
+ at se.tokenize (jquery.min.js:2)
420
+
421
+ at se.select (jquery.min.js:2)
422
+
423
+ at Function.se [as find] (jquery.min.js:2)
424
+
425
+ at k.fn.init.find (jquery.min.js:2)
426
+
427
+ at new k.fn.init (jquery.min.js:2)
428
+
429
+ at k (jquery.min.js:2)
430
+
431
+ at scrollToAnker ((index):58)
432
+
433
+ at HTMLAnchorElement.<anonymous> ((index):51)
434
+
435
+ at HTMLAnchorElement.dispatch (jquery.min.js:2)
436
+
437
+ ```
438
+
439
+ どこをどうすればいいのかもわからなくなってしまいました。
440
+
441
+ スムーススクロールは諦めた方が良いでしょうか…

2

デベロッパーツールでの確認ミスのため追記

2019/11/25 09:09

投稿

nmnm
nmnm

スコア5

test CHANGED
File without changes
test CHANGED
@@ -223,3 +223,65 @@
223
223
 
224
224
 
225
225
  と警告部分に表示されました。Firefoxでもエラーは確認されませんでした。
226
+
227
+
228
+
229
+ ### デベロッパーツールでの確認（確認ミスのため修正）
230
+
231
+ ~~クロームで確認したところエラーは出ていませんが警告が22と表示されました。
232
+
233
+ ですが警告の内容がわからなかったので（添付のように表示されます）
234
+
235
+ ![イメージ説明](c1d9ea6393dfeae7fe3da3ba0906654f.png)
236
+
237
+ Firefoxのデベロッパーツールで確認すると~~
238
+
239
+
240
+
241
+ ```
242
+
243
+ ~~このサイトはスクロールに対して配置を固定する効果が使用されています。
244
+
245
+ これは非同期パンで正しく動作しない可能性があります。
246
+
247
+ 詳細は https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects を参照し、
248
+
249
+ 関連するツールと機能の議論に参加してください。
250
+
251
+
252
+
253
+ ```
254
+
255
+
256
+
257
+ ~~と警告部分に表示されました。Firefoxでもエラーは確認されませんでした。~~
258
+
259
+
260
+
261
+ 先ほどエラーはなかったと書きましたが間違いでした。
262
+
263
+ シングルページでアンカーリンクをクリックすると
264
+
265
+ ```ここに言語を入力
266
+
267
+ TypeError: target.offset(...) is undefined
268
+
269
+ ```
270
+
271
+ と表示されました。どちらをクリックしても同じエラーが出ます。
272
+
273
+ ```ここに言語を入力
274
+
275
+ var position = target.offset().top + 450;
276
+
277
+ ```
278
+
279
+ ```ここに言語を入力
280
+
281
+ var position = target.offset().top -30;
282
+
283
+ ```
284
+
285
+ に原因があると表示されます。
286
+
287
+ 確認ミス申し訳ございません。

1

デベロッパーツールでの確認をしました

2019/11/08 08:05

投稿

nmnm
nmnm

スコア5

test CHANGED
File without changes
test CHANGED
@@ -191,3 +191,35 @@
191
191
  MySQL/5.7.25
192
192
 
193
193
  作業環境/DreamWeaver2019・Google Chrome
194
+
195
+
196
+
197
+ ### デベロッパーツールでの確認
198
+
199
+ クロームで確認したところエラーは出ていませんが警告が22と表示されました。
200
+
201
+ ですが警告の内容がわからなかったので（添付のように表示されます）
202
+
203
+ ![イメージ説明](c1d9ea6393dfeae7fe3da3ba0906654f.png)
204
+
205
+ Firefoxのデベロッパーツールで確認すると
206
+
207
+
208
+
209
+ ```
210
+
211
+ このサイトはスクロールに対して配置を固定する効果が使用されています。
212
+
213
+ これは非同期パンで正しく動作しない可能性があります。
214
+
215
+ 詳細は https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects を参照し、
216
+
217
+ 関連するツールと機能の議論に参加してください。
218
+
219
+
220
+
221
+ ```
222
+
223
+
224
+
225
+ と警告部分に表示されました。Firefoxでもエラーは確認されませんでした。