jQuery scroll to anchor works on mobile but not on desktop

Question

I have 2 images in my html. 1 I show on the mobile version(if screen is smaller than 992px) and the other on desktop version.

I added an id to these images to use as an anchor. Everything works great on mobile devices but on the desktop version it doesn't wanna go to the anchor. Even though the id is there in the html.

This is what my images in html looks like:

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

These are the links: Dekstop menu:

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

Mobile menu:

<ul class="nav mobile-nav-bar">
   <li class="navbar-right"><a data-id="cont" href="#contact">Contact</a></li>
</ul>

This is my 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);

    });

Anyone has any idea why it doesn't work on desktop?

Many Thanks in advance!!

You need to have a unique `id` for each image. The correct code should be: ` ` — Aziz, Apr 28 '16 at 07:52

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

You could not have two items with same ID. Use only one img and change the source depending on device. Use this to know if you're on mobile.

edited May 23 '17 at 11:59

Community

1
1

answered Apr 28 '16 at 07:53

bokan

3,601
2
23
38

Can't realy do this since the image is positioned somewhere else on mobile devices – Frank Lucas Apr 28 '16 at 07:54

score 0 · Answer 2 · answered Apr 28 '16 at 08:07

You have two HTML elements with the same ID attribute "wie":

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

The ID attribute value must be unique within your HTML document.

https://www.w3.org/TR/html5/dom.html#the-id-attribute

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

jQuery scroll to anchor works on mobile but not on desktop

2 Answers2