Question

我的html中有2张图片。 1我在移动版本上显示（如果屏幕小于992px），另一个在桌面版本上显示。

我在这些图片中添加了一个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);

    });

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

非常感谢提前!!

Answer 1

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

Answer 2

您有两个具有相同ID属性“wie”的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）。该 value必须在元素的home子树中的所有ID中唯一并且必须至少包含一个字符。该值不得包含任何空格字符。

jQuery滚动到锚点可以在移动设备上运行但不能在桌面上运行

2 个答案: