前提・実現したいこと
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を設定
など試してみましたが、よくわかりませんでした。