ブラウザバックで戻ると、中心がずれてしまいます。

前提・実現したいこと

HTMLとCSSを使ってホームページを作成しています。
ページAから、ページBに複数のリンクを張っており、それぞれの飛び先はページBの各IDに設定しています。
具体的には、ページAからのリンクは、「area.html」「area.html#tokyo」「area.html#kanagawa」「area.html#saitama」・・・といった感じです。

そして、ページAもページBもwidthを1024pxに設定し、margin: 0 auto;で中央寄せしています。
また、ページの途中ウィンドウ幅いっぱいにデザインを施したい関係で、H2要素やいくつかのdiv要素にはmargin: 0 -100%;、padding: 0 -100%;を設定し、bodyにはoverflow-x: hidden;を設定しています。

基本的にはbody全体が中央に寄せられて表示されていますが、ページAから、ページBの#つきのリンクを踏んだあと、ブラウザバックでページAに戻った時、ページAのbody全体が左に200~300pxほどずれて表示されてしまいます。

色々と検索をしましたが、原因がわからずにいますので、わかる方がいましたら、ご教授お願いいたします。

該当と思われるコード

html
1
2<!--index.html-->
3
4<body>
5
6<h1>テキストテキスト</h1>
7<h2>テキストテキスト</h2>
8
9<div class="areaflex">
10   <a href="kanto.html#saitama"><div class="arealink">埼玉県</div></a>
11   <a href="kanto.html#tokyo"><div class="arealink">東京都</div></a>
12   <a href="kanto.html#tiba"><div class="arealink">千葉県</div></a>
13   <a href="kanto.html#ibaraki"><div class="arealink">茨城県</div></a>
14   <a href="kanto.html#kanagawa"><div class="arealink">神奈川県</div></a>
15</div>
16</body>
17

html
1
2<!--kanto.html-->
3
4<body>
5
6<h1>テキストテキスト</h1>
7<h2>関東エリア</h2>
8
9<section id ="saitama">
10   <h3>埼玉県</h3>
11   <p>テキストテキストテキストテキスト</p>
12</section>
13
14<section id ="tokyo">
15   <h3>東京都</h3>
16   <p>テキストテキストテキストテキスト</p>
17</section>
18
19<section id ="tiba">
20   <h3>千葉県</h3>
21   <p>テキストテキストテキストテキスト</p>
22</section>
23
24</body>
25

CSS
1body{
2max-width: 1024px;
3margin: 0 auto; 
4overflow-x: hidden;
5}
6
7h2{
8font-size: 24px;
9color: #ffffff;
10font-weight: bold;
11background-color: #003300;
12text-align: center;
13margin: 0 -100% 0 -100%;
14padding: 14px 100% 14px 100%;
15}
16
17.areaflex{
18display: flex;
19flex-wrap: wrap;
20}
21
22.arealink{
23background-color: #003300;
24width: 120px;
25height: 48px;
26color: #ffffff;
27font-size: 18px;
28text-align: center;
29line-height: 48px;
30border-radius: 6px;
31margin: 6px 20px 20px 0;
32transition: 240ms;
33}
34
35.arealink:hover{
36background-color: #006600;
37}

試したこと

・jQueryが何か悪さをしているのか？と思い、思い当たるjQueryを一回切る。
・body自体にposition: relativeを設定

など試してみましたが、よくわかりませんでした。

m.ts10806

2019/08/23 06:11

実際に現象が再現するコードを全て提示してください。 ※コード量が多いのでしたら最小構成で再現するコードでも構いません https://teratail.com/help/question-tips#questionTips3-5-1

pippipippi

2019/08/23 06:28

以下のような形になります。いかがでしょうか？ ---------------------- ページA【index.html】 <body> <h1>テキストテキスト</h1> <h2>テキストテキスト</h2> <div class="areaflex"> <a href="kanto.html#saitama"><div class="arealink">埼玉県</div></a> <a href="kanto.html#tokyo"><div class="arealink">東京都</div></a> <a href="kanto.html#tiba"><div class="arealink">千葉県</div></a> <a href="kanto.html#ibaraki"><div class="arealink">茨城県</div></a> <a href="kanto.html#kanagawa"><div class="arealink">神奈川県</div></a> </div> </body> ---------------------- ページB【kanto.html】 <body> <h1>テキストテキスト</h1> <h2>関東エリア</h2> <section id ="saitama"> <h3>埼玉県</h3> <p>テキストテキストテキストテキスト</p> </section> <section id ="tokyo"> <h3>東京都</h3> <p>テキストテキストテキストテキスト</p> </section> <section id ="tiba"> <h3>千葉県</h3> <p>テキストテキストテキストテキスト</p> </section> </body> ---------------------- CSS（ページA、ページB共通） body{ max-width: 1024px; margin: 0 auto; overflow-x: hidden; } h2{ font-size: 24px; color: #ffffff; font-weight: bold; background-color: #003300; text-align: center; margin: 0 -100% 0 -100%; padding: 14px 100% 14px 100%; } .areaflex{ display: flex; flex-wrap: wrap; } .arealink{ background-color: #003300; width: 120px; height: 48px; color: #ffffff; font-size: 18px; text-align: center; line-height: 48px; border-radius: 6px; margin: 6px 20px 20px 0; transition: 240ms; } .arealink:hover{ background-color: #006600; }

m.ts10806

2019/08/23 06:33

質問を編集して追記してください。こちらはあくまで「質問への追記修正依頼」のコメント欄です。こちらに載せられてもデフォルト非表示であるため目につきにくいです。また、コードはマークダウンのcode機能を利用してご提示ください https://teratail.com/help#about-markdown

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

回答1件

CSS
1body :not(h2) {
2max-width: 1024px;
3margin: 0 auto;
4}
5
6h2{
7font-size: 24px;
8color: #ffffff;
9font-weight: bold;
10background-color: #003300;
11text-align: center;
12margin: 0;
13padding: 14px auto;
14}
15
16.areaflex{
17display: flex;
18flex-wrap: wrap;
19}
20
21.arealink{
22background-color: #003300;
23width: 120px;
24height: 48px;
25color: #ffffff;
26font-size: 18px;
27text-align: center;
28line-height: 48px;
29border-radius: 6px;
30margin: 6px 20px 20px 0;
31transition: 240ms;
32}
33
34.arealink:hover{
35background-color: #006600;
36}