【HTML】ページ内リンクが一部ブラウザで正常に機能しません。

Question

ボトムナビゲーションに配置した各バナー画像から、メインページの指定した箇所にページ内リンクを設定しています。
作成中のプレビューでは問題ありませんでしたが、サーバーにアップ後スマホにて確認してみると、Google ChromeとIEでは正常でしたが、FireFoxとSafariではおかしな箇所に飛んでしまいます。

コードは（簡略化しています）
【メインページ】

<div class="bnrA">
		<p id="pg2"><img src="https://placehold.jp/960x150.png" alt="看板2"></p>
	</div>
	<div class="bnrA">
		<p id="pg3"><img src="https://placehold.jp/960x150.png" alt="看板3"></p>
	</div>
	<div class="bnrA">
		<p id="pg4"><img src="https://placehold.jp/960x150.png" alt="看板4"></p>
	</div>
	<div class="bnrA">
		<p id="pg5"><img src="https://placehold.jp/960x150.png" alt="看板5"></p>
	</div>

【ボトムナビゲーション】

<ul class="menu">
		<li><a href="#pg2"><img src="https://placehold.jp/200x150.png" alt="看板2" width="100%" /></a></li>
		<li><a href="#pg3"><img src="https://placehold.jp/200x150.png" alt="看板3" width="100%" /></a></li>
		<li><a href="#pg4"><img src="https://placehold.jp/200x150.png" alt="看板4" width="100%" /></a></li>
		<li><a href="#pg5"><img src="https://placehold.jp/200x150.png" alt="看板5" width="100%" /></a></li>	
		
	</ul>

のように書いています。

コードに問題があるのか、ブラウザの環境により正常に機能しないものがあるのか分からずご質問させていただきました。
ブラウザの環境で起こる現象の場合、回避する方法がありましたら合わせて教えていただけますと助かります。

よろしくお願いいたします。

---

ご指摘をいただきまして、実際に作成しましたコードを追記させていただきます。
URL、画像はダミーとなってしまい申し訳ございません（オープン前の企画のため申し訳ございません）
エラーとなるのはスマートフォンでの表示のときです。
よろしくお願いいたします。

【CSS】長くなるためスマホ版のみ記載させていただきます。

<style type="text/css">
/*-----------------*/
/*【共通】上に戻るボタン*/
/*-----------------*/
#pageTop {
  position: fixed;
  bottom: 70px;
  right: 20px;
}

#pageTop img {
    padding: 6px 0px 0px 6px;
}

#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 8px;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  background-color: #252525;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/*-----------------*/
/*【共通】背景透過*/
/*-----------------*/
a:hover {
   opacity: 0.65; /* 25％ほど透明にする */
}


/*-----------------*/
/*　【共通】スクロールするとフェード*/
/*-----------------*/
/*
.fade {
  opacity: 0;
  transition: all .5s ease;
}

.fade.show {
  opacity: 1;
  transform: none;
}

.fadeUp {
  transform: translate(0, 100px);
}
*/

/*-----------------*/
/*スマホ表示*/
/*-----------------*/

@media only screen and (max-width:599px){
body {
	background-image: url("");
	background-repeat: no-repeat;
	background-size: 100%;
	background-attachment: fixed;
	max-width: 98%;
	}

/*【SP】メニュー*/
.menuT{
	margin-top:2%;
	
}

.menuT img{
	margin-left:2%;
	margin-right:2%;
	width:98%;
}

.menuT:after{
	display:block;
	content:"";
	}


.menuB{
	margin-left:3%;
	margin-top:3%;
	margin-bottom:-2%;
	background-color:#ffe4e1;
}

.menuB:after{
	display:block;
	clear:both;
	content:"";
	}


.bnrA{
	margin-top:1%;	
	margin-bottom:0%;
}

.bnrA img{
	margin-left:2%;
	margin-right:2%;
	width:98%;
}

.bnrA:after{
	display:block;
	clear:both;
	content:"";
	}
	
.date{
	margin-top:2%;
	margin-bottom:2%;
}

.date img{
	margin-left:2%;
	margin-right:2%;
	width:98%;
}

.date:after{
	display:block;
	clear:both;
	content:"";
	}


/*【SP】可変（4カラム⇒2カラム）*/
.clm4{
	float:left;
	width:49%;
	margin-top:0%;
	margin-left:1%;
	margin-right:0%;
	margin-bottom:0%;
}

.clm4 img{
	margin-left:2%;
	margin-right:0%;
	width:96%;
}

.clm4R{
	float:left;
	width:49%;
	margin-top:0%;
	margin-left:0%;
	margin-right:1%;
	margin-bottom:0%;
}

.clm4R img{
	margin-left:3%;
	margin-right:0%;
	width:96%;
}

/*【SP】可変（2カラム）*/

.clm2{
	float:left;
	width:49%;
	margin-top:0%;
	margin-left:1%;
	margin-right:0%;
	margin-bottom:2%;
}

.clm2R{
	float:left;
	width:49%;
	margin-top:0%;
	margin-left:1%;
	margin-right:0%;
	margin-bottom:2%;
}


.clm2 img{
	margin-left:2%;
	margin-right:2%;
	width:96%;
}

.clm2R img{
	margin-left:2%;
	margin-right:2%;
	width:96%;
}


/*【SP】ボトムナビゲーション用*/
.menuTop {
	width:100%;
    text-align: center;
    padding: 0;
    margin: 0;
}

.menuTop li {
	width: 96%;
	display: inline-block;
	text-align: left;
}

.menu {
	width:100%;
    text-align: center;
    padding: 0;
    margin: 0;
}

.menu li {
	width: 24%;
	display: inline-block;
	text-align: left;
	margin-left:-1%;
}

.menu li:first-child {
	margin-left: -4%;
}


.menu li:last-child {
	margin-right: -4%;
}


#bottomNav{
	position: fixed !important;
	position: absolute;
    bottom: -25px;
    left:0px;
    width: 100%;
    height: 150px;

}

#container {
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    bottom:-45px;
}

.bnrA::before {
    content: "";
    display: inline-block;
    height: 100px;
    margin-top: -100px;
    vertical-align: top;
}
}

*/	
</style>

【HTML】

<html>
-
省略
<body>
<div class="wrapper">
	<div class="menuT">
			<img src=
			"https://placehold.jp/960x150.png" alt="">
			<br>
	</div>
	
	
	<div class="bnrA fade fadeUp">
		<p id="pg1"><img src="https://placehold.jp/960x150.png" alt=""></p>
	</div>

	
	<div class="bnrA fade fadeUp">
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		<br>
</div>
<div class="bnrA fade fadeUp">
		<p id="pg2"><img src="https://placehold.jp/960x150.png" alt=""></p>
	</div>
	
	<div class="date fade fadeUp">
		<img src="https://placehold.jp/960x150.png" alt="">
	</div>
	
	<div class="menu2 fade fadeUp">
		<div class="clm2">
			<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		</div>
		<div class="clm2R">
			<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		</div>
		<div class="clm2">
			<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		</div>
		<div class="clm2R">
			<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		</div>
		<br><br>
	</div>
	
	<div class="bnrA fade fadeUp">
		<p id="pg3"><img src="https://placehold.jp/960x150.png" alt=""></p>	
	</div>

	<div class="bnrA fade fadeUp">
		<a href=""><img src="https://placehold.jp/960x150.png" alt=""></a>
	</div>

	<div class="bnrA fade fadeUp">
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>	
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
		
	</div>
	<div class="bnrA fade fadeUp">
		<p id="pg4"><img src="https://placehold.jp/960x150.png" alt=""></p>
		<br>
	</div>

	<div class="menu2 fade fadeUp">
			<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
			<br><br>
			<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
			<br>

	</div>
	<div class="bnrA fade fadeUp">
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
	</div>
	<div class="bnrA fade fadeUp">
		<a href="#"><img src="https://placehold.jp/960x150.png" alt=""></a>
	</div>




	
<!--ボトムナビゲーションここから-->
<div id="bottomNav">
	<div id="container">
	<!-- メニュー -->
	<ul class="menuTop">
		<li><a href="#pg1"><img src="https://placehold.jp/960x150.png" alt="" width="100%" /></a></li>	
	</ul>
	<ul class="menu">
		<li><a href="#pg2"><img src="https://placehold.jp/960x150.png" alt="" width="100%" /></a></li>
		<li><a href="#pg3"><img src="https://placehold.jp/960x150.png" alt="" width="100%" /></a></li>
		<li><a href="#pg4"><img src="https://placehold.jp/960x150.png" alt="" width="100%" /></a></li>
		<li><a href="#pg5"><img src="https://placehold.jp/960x150.png" alt="" width="100%" /></a></li>			
	</ul>
	<!-- /メニュー -->
	</div>
</div>
<!--ボトムナビゲーションここまで-->

<!--上に戻るボタン-->
<p id="pageTop"><a href="#"><img src="https://image.rakuten.co.jp/jewlinge/cabinet/01089476/05587456/up_wt.gif"></a></p>
<!--/上に戻るボタン-->



<!--スクロールするとフェードJS-->
<script>
	var scrollAnimationElm = document.querySelectorAll('.fade');
	var scrollAnimationFunc = function() {
	  for(var i = 0; i < scrollAnimationElm.length; i++) {
	    var triggerMargin = 300;
	    if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
	      scrollAnimationElm[i].classList.add('show');
	    }
	  }
	}
	window.addEventListener('load', scrollAnimationFunc);
	window.addEventListener('scroll', scrollAnimationFunc);
</script>
<!--/スクロールするとフェードJSここまで-->
</body>
</html>

同じダミー画像のため見難いかも知れません、申し訳ございません。
もし分かる方がいらっしゃいましたら教えていただけますと助かります。
よろしくお願いいたします。

Comments

[m.ts10806]

「おかしな箇所」とは？

[mutsuki22]

いくつか質問です。
mts10806さんが仰っている点もですが、提示されているコード全てpg3なのですが、合ってますか？
もし合っているならidは同じ名前は1つしかつけたらいけません。
複数つけるならidではなくclassです。

[x_x]

To: mutsuki22さん
スタイルをつけたいわけではなくフラグメント識別子で飛びたいのだからclassはないでしょう

[tuuli]

mts10806 様
コメントいただきありがとうございます。
「おかしな場所」という意味は、設定した箇所ではなく全く違うところに飛びます。4つ全てではなく、 pg3とpg5のみおかしくなります。コピー＆ペーストでpg2と同じにしてidを変更しても全く違うところに飛びます。

[tuuli]

mutsuki22 様
コメントいただきましてありがとうございます。
またご指摘いただきましてありがとうございます。
質問を書く際に間違えました。実際はid名は全て違います。
修正をさせていただきました。

[x_x]

提示コードのみでは再現しません。再現するコード(CSS/HTML)をお願いします。

[mutsuki22]

x_xさん
ですね。
申し訳ありません、お伝えしたい事を伝えるには言葉足らずでした。
質問者様に誤解も招きかねないので、以後気をつけます。

[x_x]

> スマホ版のみ記載
PCでは問題なく、iPhone/Androidのみで問題があるということでしょうか？

[tuuli]

x_x 様
コメントいただきましてありがとうございます。
スマートフォンで見たときに、GoogleChromeとIEでは問題がありませんでしたが、FireFoxとSafariでは正常に飛びませんでした。スマートフォンは、Android、iPhone両方で確認しています。
よろしくお願いいたします。

Answer 1

ご回答いただきました皆様ありがとうございました。

こちら、html5では文法的にNGではありますが、idをnameに変えてページ内リンクを行うことで解決いたしました。

ありがとうこざいました。