Chrome scrolls to wrong location on anchor tags

Question

While working on this locally, chrome, safari and firefox (all on OS X) all scrolled to the proper locations when using the menu at the bottom.

Now that it's being accessed online (from a windows machine), chrome doesn't scroll to the right locations, but IE does. Interestingly, mobile safari is also having the same issue.

Each link in the footer at the bottom should scroll to its corresponding 'label'. IE does that fine, but chrome just puts me 'sort of near' there.

http://www.colinandmya.com/sitetest/index.html

Any help is greatly appreciated.

** EDIT: ADDED A JSFIDDLE ** (i hope i did it right... thanks again for letting me know the process)

http://jsfiddle.net/prefekt/aKJ3Y/

$(document).ready(function() {


function filterPath(string) {
return string
  .replace(/^\//,'')  
  .replace(/(index|default).[a-zA-Z]

{3,4}$/,'')  
  .replace(/\/$/,'');
  }
  $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == 

filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
  var $targetId 

= $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
  var $target = $targetId.length ? $targetId : 

$targetAnchor.length ? $targetAnchor : false;
   if ($target) {
     var targetOffset = $target.offset().top;


 $(this).click(function() {
       $('html, body').animate({scrollTop: targetOffset}, 1000);
       return false;


 });
  }
}
  });
});

Answer 1

I think that the problem is how you are embedding the youtube video. z-index is ignored

try this script to fix

$(document).ready(function(){
    $('iframe').each(function(){
          var url = $(this).attr("src");
          var char = "?";
          if(url.indexOf("?") != -1){
                  var char = "&";
           }

          $(this).attr("src",url+char+"wmode=transparent");
    });
});

or just embed video in this way

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/xxxxxx?wmode=transparent" frameborder="0" wmode="Opaque">

and not in this way

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/xxxxx" frameborder="0" wmode="Opaque">