運行時錯誤：無法獲取財產「頂」

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];