質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 711

score 13

ボトムナビゲーションに配置した各バナー画像から、メインページの指定した箇所にページ内リンクを設定しています。
作成中のプレビューでは問題ありませんでしたが、サーバーにアップ後スマホにて確認してみると、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>

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mutsuki22

    2019/02/27 17:42 編集

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

    キャンセル

  • x_x

    2019/02/27 18:12

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

    キャンセル

  • tuuli

    2019/02/27 18:16

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

    キャンセル

回答 1

check解決した方法

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る