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

    });

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

很多預先感謝！

來源

2016-04-28 Frank Lucas

您需要爲每個圖像都有唯一的'id'。正確的代碼應該是： ' ' – Aziz

您不能有兩個具有相同ID的項目。僅使用一個img並根據設備更改源。使用this來了解您是否使用手機。

來源

2016-04-28 07:53:22 bokan

不能這樣做，因爲圖像位於移動設備上的其他位置 –

你有相同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中唯一，並且必須至少包含一個字符。該值不能包含任何空格字符。

來源

2016-04-28 08:07:35

jQuery滾動到錨點在手機上工作，但不在桌面上

回答

相關問題