javascript - jQuery 滚动 anchor 适用于移动设备，但不适用于桌面设备

Question

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

我为这些图像添加了一个 id 以用作 anchor 。在移动设备上一切都很好，但在桌面版本上它不想去 anchor 。即使 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);

    });

有人知道为什么它不能在桌面上运行吗？

非常感谢!!

Answer 1

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