jQuery 滚动到锚点适用于移动设备，但不适用于桌面

jQuery scroll to anchor works on mobile but not on desktop

本文关键字：适用于 桌面 不适用 移动 滚动 jQuery      更新时间：2023-09-26

我的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="">

这些是链接：德克停止菜单：

<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 的项目。仅使用一个 img 并根据设备更改源。使用它来了解您是否在移动设备上。

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

相关文章：