jQueryのスクロールアンカーはモバイルでは動作しますが、デスクトップでは動作しません

Question

私は自分のhtmlに2つの画像を持っています。 1モバイル版（画面が992pxより小さい場合）とデスクトップ版で表示します。

これらの画像にアンカーとして使用するIDを追加しました。すべてがモバイルデバイスでうまくいきますが、デスクトップ版ではアンカーに行きたくありません。たとえidがhtmlにあるとしても。

これは、HTMLでの私のイメージは次のようになります。 Dekstopメニュー：

<ul class="nav navbar-nav"> 
    <li class="navbar-right"><a data-id="wie" href="#wie">Wie</a></li> 
</ul> 

モバイルメニュー：これらのリンクです

<img id="wie" class="cool-image-2" src="source1" alt=""> 
<img id="wie" class="cool-image-2" src="source2" alt=""> 

<ul class="nav mobile-nav-bar"> 
    <li class="navbar-right"><a data-id="cont" href="#contact">Contact</a></li> 
</ul> 

これは私ですjQuery：

jQuery(".nav li a").click(function(e) { 
     e.preventDefault(); 
     $id = jQuery(this).attr("data-id"); 
     jQuery("a.clicked").removeClass("clicked"); 
     jQuery(this).addClass("clicked"); 
     console.log($id); 

      jQuery('html, body').animate({ 
       scrollTop: jQuery("#"+$id).offset().top 
      }, 1000); 

    }); 

誰でもデスクトップ上で動作しない理由は何ですか？

多くの方々、ありがとうございます。

Answer 1

同じIDを持つ2つのアイテムを持つことはできませんでした。 imgを1つだけ使用し、デバイスに応じてソースを変更します。 thisを使用して、携帯電話かどうかを確認してください。

Answer 2

あなたは同じID属性「ウィー」との2つのHTML要素を持っている：

<img id="wie" class="cool-image-2" src="source1" alt=""> 
<img id="wie" class="cool-image-2" src="source2" alt=""> 

ID属性値がHTML文書内で一意である必要があります。

https://www.w3.org/TR/html5/dom.html#the-id-attribute

id属性は、その要素の一意の識別子（ID）を指定します。 の値は、要素のホームサブツリー のすべてのIDの中で一意でなければならず、少なくとも1文字を含む必要があります。値には、空白文字が含まれていてはなりません（ ）。