On-Page “anchor” scroll links don't scroll to the right place only on the mobile version

Question

I use anchor tags to scroll my website.

Only when I use a mobile to view the page (or open the browser using a smaller width), it scrolls for about 100px more that it should.

I changed this in the .js file:

  $.localScroll({
        offset:{left: 0, top:-100 }
    });

(now works fine with mobiles but not with the desktop browsers)

from:

  $.localScroll({
        offset:{left: 0, top:-184 }
    });

(that dosen't work fine with mobiles.)

What's causing this problem? What can be the best solution?

Answer 1

Possible solution without knowing you code or knowlage of what is different in mobile code:

var problemIfSmallerThanThis = 1200; // Your "problem"-width where the error appears
var docWidth = $(document).width();
if(docWidth > problemIfSmallerThanThis ){
$.localScroll({
        offset:{left: 0, top:-184 }
    });
}else{
$.localScroll({
        offset:{left: 0, top:-100 }
    });
}

IT´s just a WORKAROUND