HOME > jQuery > ページ外リンク(他のページへのアンカーリンク)が効かない、狙った位置ではない

ページ外リンク(他のページへのアンカーリンク)が効かない、狙った位置ではない

ページ外リンク(他のページへのアンカーリンク)で開いた先が、希望するコンテンツ位置ではなくズレている、という不具合が起きた。

ページ内外リンクの緯線先のエラー・不具合というと「緯線先のコンテンツが固定ヘッダーの下に隠れてしまう」ことは良くあるケースだが、今回は緯線先コンテンツを固定ヘッダーの下にもぐらないように対処した後に出てきた不具合だった。

緯線先が不規則という謎

不具合は、ページ外リンク#01、#02、#03に緯線すると、
・#01はヘッダー下にもぐる
・#02はそこそこいい位置に着地
・#03は#02と同じような位置に着地
といった感じで、不具合に規則性が見つけられず謎々だった。

原因は、「ページトップへ」に設定したjQueryの記述

一夜明けて気を取り直して対応。

ページ内外リンクには「#」を使う。そしてページトップのhrefでも「#」を使ってた。これが原因。「ページトップへ」ボタンのための設定が、ページ内外リンクにも効いていたようだ。

jQueryの記述を確認すると「ページトップへ」にスムーススクロールを設定するために以下の記述をしていた。href全般に効いてしまう書き方?

$("a[href ^='#']").click(function() {

対策として、「ページトップへ」のIDを指定したら不具合は解消!あっさり。

$("#pagetop a[href ^='#']").click(function() {

ヒントになったのは、↓参考サイトの「ページの下部にある、ページトップに移動するリンクがページを開いた時に動作してしまうなどといった事が起きていませんか?」という指摘。Thanks!

参考サイト