Question

在本地工作时，chrome，safari和firefox（所有在OS X上）都在使用底部的菜单时滚动到正确的位置。

现在它已经在线访问（从Windows机器上），Chrome并没有滚动到正确的位置，但IE确实如此。有趣的是，移动游猎也存在同样的问题。

底部页脚中的每个链接都应滚动到相应的标签＆＃39;。 IE确实那么好，但铬只是让我有点接近＆＃39;那里。

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

非常感谢任何帮助。

**编辑：添加了一个JSFIDDLE ** （我希望我做对了......再次感谢让我知道这个过程）

$(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

我认为问题在于您如何嵌入YouTube视频。 z-index被忽略

尝试使用此脚本修复

$(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");
    });
});

或以这种方式嵌入视频

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

而不是这样

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

Answer 2

移动以下行：

var targetOffset = $target.offset().top;

在点击事件中：

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

该变量在click事件之外设置，并且当单击时targetOffset不是当前值。有关此内容的更多信息，请查找Javascript变量范围。

Chrome会在锚标记上滚动到错误的位置

2 个答案: