jQuery Scroll zu verankern funktioniert auf Handy, aber nicht auf dem Desktop

Question

Ich habe 2 Bilder in meinem HTML. 1 Ich zeige auf der mobilen Version (wenn der Bildschirm kleiner als 992px ist) und die andere auf der Desktop-Version.

Ich habe diesen Bildern eine ID hinzugefügt, um sie als Anker zu verwenden. Alles funktioniert gut auf mobilen Geräten, aber auf der Desktop-Version will es nicht zum Anker gehen. Obwohl die ID dort im HTML ist.

Dies ist, was in html meine Bilder wie folgt aussieht:

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

Diese Links sind: Dekstop Menü:

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

Mobil-Menü:

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

Das ist mein 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); 

    }); 

Jeder hat eine Idee, warum es nicht auf dem Desktop funktioniert?

Vielen Dank im Voraus!

Answer 1

Sie konnten nicht zwei Objekte mit derselben ID haben. Verwenden Sie nur einen IMG und ändern Sie die Quelle abhängig vom Gerät. Verwenden Sie this, um zu wissen, ob Sie mobil sind.

Answer 2

Sie haben zwei HTML-Elemente mit dem gleichen ID-Attribute "wie":

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

Die ID-Attribut-Wert muss in Ihrem HTML-Dokument eindeutig sein.

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

Das id-Attribut gibt die eindeutige Kennung sein Element (ID). Der Wert muss unter allen IDs im Unterbaum des Elements eindeutig sein und mindestens ein Zeichen enthalten. Der Wert darf keine Leerzeichen enthalten.