#headerへジャンプしたいのですが…

カラーミーでショップ運営をしています。
テンプレートを大幅にカスタマイズする方法で運営をしているのですが、ページの下部にページ上部のヘッダーまで戻る矢印を設置しています。

ヘッダーも矢印も「共通」という共通に表示される箇所にいれているためカラーミー側のプログラムで全ページへ共通に入れたHTMLをひっぱって表示しているようです。

<div id="header">header要素</div>　で指定していて、戻る矢印には　<a href="#header">矢印</a>　にしています。

サイトのトップ画面では矢印を押すとheader(一番上)までスクロールして戻るのですが、それ以外のページで矢印を押すと、そこのページに表示されているheaderではなく、トップページのheaderがある上部に移動してしまいます。

カラーミーに関する質問をここでするのはナンセンスだと思いますが、最終的にたどり着いたところがここだったため原因がわかる方がいらっしゃいましたらよろしくお願いいたします。

前提・実現したいこと

どのページでも、矢印を押したらそのページの上部に戻るようにしたい。
ヘッダー・矢印は共通のため記述は1つずつになります。
難しいようであれば、どんな指定の形でも構わないためとりあえずそのページの上部にスクロールで戻りたいです。

該当のソースコード

■共通


<div id="header">
～header要素
</div>

～間どのページにも表示されるソースたち

<div id="footer">
～・・・
<a href="#header">矢印</a>
～・・・
</div>

miyabi_pudding

2021/04/27 06:45

もしかしたら、カラーミーの方で自動的に、リンクが改変されているのかもしれません。セカンドページ以降のリンク先が、 #headerであるかどうかを、実際の表示ページのソースコードを表示、や、要素検証をして確認してみてください。

ojreee

2021/04/27 07:06

確認しましたところトップ以外のページでもリンクは#headerのままでした。またヘッダーも id="header"のままでした。もう少し詳しく見てみます。ありがとうございます。

itagagaki

2021/04/27 07:38

カラーミーのことはよく知らないのですが、ブラウザでその矢印のところにマウスカーソルを乗せたらブラウザにリンク先のURLが表示されて確認できたりはしないでしょうか？ ChromeやEdgeなら左下です。

ojreee

2021/04/28 01:44

itagagaki様ありがとうございます。そのような機能があったんですね。様々なページで上部へ戻る矢印にカーソルとあわせたところ、全てhttps://www.ドメイン名/#header となっていました。

itagagaki

2021/04/28 01:50

ということは、/sub.html の中にある矢印のリンク先は https://www.ドメイン名/sub.html#header になっていてほしいのに、実際は https://www.ドメイン名/#header になっているわけですね。それなら確かにトップページに飛んじゃうわけです。そうなる原因を調べる必要がありますね。

miyabi_pudding

2021/04/28 01:50

https://www.ドメイン名/#header となっているなら、可能性は二つあります。・カラーミーの設定上、"#"が先頭のリンク先に関しては、"/"を付与するようになっている・JSによって、上記を行っているです。カラーミーショップページ内リンクとのキーワードで再調査した方がいいかと。

ojreee

2021/04/28 02:02

itagagaki様なるほど！トップに戻る原因は、そういうことなんですね。たしかに、どのページもhttps://www.ドメイン名/#headerなので、そのページの上部へ戻るリンクとしてはおかしいですね。もう少し調べてみます。ありがとうございます。

ojreee

2021/04/28 02:09

miyabi_takatsuk様では、カラーミーの設定でそうなっている可能性が高いとのことですよね。こちら側の記述が間違っているなら…と思ったのですがもう少しカラーミーの設定を調べてみます。ありがとうございます。

ojreee

2021/04/30 05:05

皆さんありがとうございました！どうやら文字数の制限でURLを短縮にしたくて設置していた<base href="https://www.ドメイン名/">が原因だったようです。特に無くても短縮できたようだったので削除したら無事そのページの一番上に飛ぶようになりました。お騒がせ致しました。ありがとうございましたm(__)m

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

回答1件

ベストアンサー

id="header"が（カラーミー自体が出力するなど）複数有る
HTMLの構造が崩れていて位置の解釈が違う

2のほうは、HTMLの構文エラー（閉じタグ忘れやa要素の入れ子など）のときにブラウザが自動的にする補完のせいでそういうことがあったりします。

投稿2021/04/27 09:48

kei344

総合スコア69458

ojreee

2021/04/28 01:56

ありがとうございます。検証内での検索では、#headerはヘッダー以外指定されていないようでした。エラーも確認した限りですがheader部分に関するエラーもでてこず、元のHTMLも確認しましたが閉じタグも問題ありませんでした。ざっとみたところa要素の中に矢印を入れるためのspanが入っているぐらいでしたがタグの入れ子によってそのような事が起こるとは知りませんでした。もう一度よく確認してみます。

ojreee

2021/04/30 05:10

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