运行时错误：无法获取财产“顶”

Question

问题背景：

我有一个导航栏是“顺利滚动”根据所选项目的ID对应的股利。

的问题：

在Chrome和Firefox有没有问题，当我尝试并选择从IE导航栏的选项（11版），下面的JavaScript错误显示：

0x800a138f - JavaScript runtime error: Unable to get property 'top' of undefined or null reference 

的代码：

这是叔他JS代码为平滑滚动：

<script> 
    $(document).ready(function() { 
     $('#nav .navbar-nav li>a').on('click', function (event) { 
      event.preventDefault(); 
      var sectionID = $(this).attr("href"); 
      scrollToID(sectionID, 750); 
     }); 

     function scrollToID(id, speed) { 
      var offSet = 70; 

      **ERROR LINE - IN IE ONLY:** 
      var targetOffset = $(id).offset().top - offSet; 

      $('html,body').animate({ scrollTop: targetOffset }, speed); 
     } 
    }); 
</script> 

编辑 - 添加HTML标记：

导航栏：

<div class="navbar navbar-fixed-top"> 
    <nav class="navbar navbar-default" role="navigation" id="nav"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand logo"><img src="~/images/mE.png" id="logo" alt="Logo"></a> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu<span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#myCarousel">Projects</a></li> 
          <li><a href="#Welcome">Welcome</a></li> 
          <li><a href="#features">Workplace, Education, Development</a></li> 
          <li><a href="#About">About Me</a></li> 
          <li><a href="#Location">Location</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 

股利ID：

<div class="row"> 
    <div class="col-sm-12 mePadding"> 
     <div class="carousel slide" id="myCarousel"> 

      /*CODE*/ 

     </div> 
    </div> 
</div> 

我不明白当这段代码在Chrome上正常工作时，'top'属性如何可以为null或为空？

**** EDIT 2 - 增加了新的JavaScript代码：****

更多的实物指标调查误差被causied，因为这行后：

 var sectionID = $(this).attr("href"); 

这是返回一个'未定义''sectionID'的属性。

我已经修改我的代码来实现 '数据ID' 下拉列表上的属性：

 <ul class="dropdown-menu" role="menu"> 
          <li><a href="#" data-id="myCarousel">Projects</a></li> 
          <li><a href="#" data-id="Welcome">Welcome</a></li> 
          <li><a href="#" data-id="features">Workplace, Education, Development</a></li> 
          <li><a href="#" data-id="About">About Me</a></li> 
          <li><a href="#" data-id="Location">Location</a></li> 

JavaScript的平滑滚动，现在看起来是这样的：

$(document).ready(function() { 
     $('#nav .navbar-nav li>a').on('click', function (event) { 
      event.preventDefault(); 

      var sectionID = $(this).data('data-id'); 
      console.log('ID:'+sectionID); 
      scrollToID('#' + sectionID, 750); 
     }); 

     function scrollToID(id, speed) 
     { 
      //alert('SectionID is: ' + id); 
      var offSet = 70; 
      var obj = $(id).offset(); 
      var targetOffset = $(id).offset().top - offSet; 
      $('html,body').animate({ scrollTop: targetOffset }, speed); 
     } 
    }); 

如果我硬编码div ID例如'#myCarosuel'，那么这完美的作品，即：

scrollToID('#myCarosuel, 750); 

Answer 1

随着你给的HTML代码，脚本为 “项目” 项目工程，即使在IE（11）。然而，它在其他项目（“欢迎”，...）上出现错误信息并且失败。我猜你的一个或几个id是不正确的：检查你的页面中是否存在“欢迎”，“功能”，“关于”和“位置”（同样要注意id大小写）。

正如我之前写的，offset()如果应用于不正确的选择器可能会返回null。

Answer 2

我遇到过这个问题几次与IE浏览器（如此令人沮丧）。没有看你的CSS，这个（我发现）的主要原因是它无法找到父元素的高度/位置。如果IE无法找到它，它会自动搜索'body'（或'html'）标签的位置。特别是在使用相对定位时。

因此，请确保您已定义了所有父级div的高度/定位。另一个可能的解决方案是定义标签定位。

希望这会有所帮助！

P.S.用你的CSS更新可能会有所帮助。

Answer 3

升级jQuery可能会解决这个问题。请参阅Wrong extraction of .attr("href") in IE7 vs all other browsers?因为它失败。

您的DIV的编号为myCarousel，但sectionID在IE中可能如下所示：http://example.com/myCarousel。因此，使用您的原始代码和您的jQuery版本无法定位DIV。

如果你不想升级的jQuery，这可以让你去：

var sectionID = '#'+($(this).attr('href').split('#')[1];