jQuery滚动到锚点在手机上工作，但不在桌面上

问题描述：

我有2个图像在我的HTML。 1我在移动版本上展示（如果屏幕小于992px），另一个在桌面版本上展示。jQuery滚动到锚点在手机上工作，但不在桌面上

我向这些图像添加了一个ID用作锚点。一切工作在移动设备上很好，但在桌面版本上，它不想去锚点。即使id在html中。

这是我在HTML图像的样子：

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

这些链接： Dekstop菜单：

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

手机菜单：

<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); 

    });

任何人都知道为什么它不能在桌面上工作？

很多预先感谢！

您需要为每个图像都有唯一的'id'。正确的代码应该是： '' – Aziz

答

您不能有两个具有相同ID的项目。仅使用一个img并根据设备更改源。使用this来了解您是否使用手机。

不能这样做，因为图像位于移动设备上的其他位置 –

答

你有相同ID属性“魏圣美”两个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中唯一，并且必须至少包含一个字符。该值不能包含任何空格字符。

jQuery滚动到锚点在手机上工作，但不在桌面上

相关推荐