JavaScript ошибка времени выполнения в IE: Невозможно получить свойство «сверху»

Question

Вопрос фона:

У меня есть Navbar, что «плавно прокручивается» в соответствующей DIV на основе выбранных элементов ид.

выпуска:

В Chrome и FireFox нет никаких проблем, когда я пытаюсь выбрать вариант из навигационной панели в IE (версия 11) следующее сообщение об ошибке JavaScript показывает:

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

код:

Это т он JS код для Smooth Scroll:

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

EDIT - ADDED HTML MARKUP:

Navbar:

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

Div ID:

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

      /*CODE*/ 

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

Я не понимаю, как свойство «top» может быть пустым или пустым, если этот код отлично работает в Chrome?

**** EDIT 2 - Добавлено новый код JavaScript: ****

После некоторых более invesigation ошибки быть causied из этой линии:

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

Это возвращает ' undefined 'для' sectionID '.

Я изменил мой код для реализации 'данные идентификатора' атрибутов в списке:

 <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, например '#myCarosuel', тогда это работает отлично, то есть:

scrollToID('#myCarosuel, 750); 

Answer 1

С HTML кода вы даете, ваш скрипт работает для элемента "Проекты", даже в IE (11). Однако он не работает на других элементах («Добро пожаловать», ...) с сообщением об ошибке, которое вы упомянули. Я полагаю, что один или несколько из вашего идентификатора неверны: убедитесь, что на вашей странице присутствуют «приветствия», «функции», «о» и «местоположение» (обратите внимание также на случай идентификатора).

Как я уже писал ранее, offset() может возвращать значение null, если применяется к некорректному селектору.

Answer 2

Я столкнулся с этой проблемой несколько раз с IE (так расстраивает). Не глядя на ваш CSS, основная причина этого (что я нашел) заключается в том, что он не может найти высоту/позиционирование родительского элемента. Если IE не может найти его, он автоматически выполняет поиск тега 'body' (или 'html'). Это особенно важно при использовании относительного позиционирования.

Таким образом, убедитесь, что вы указали всю высоту/позиционирование родительских divs. Другим возможным решением является определение позиционирования метки.

Надеюсь, это поможет!

P.S. Обновление с помощью CSS может помочь.

Answer 3

Обновление jQuery может решить проблему. См. Wrong extraction of .attr("href") in IE7 vs all other browsers? по причине его отказа.

Ваш DIV имеет id myCarousel, но sectionID может выглядеть следующим образом: IE: http://example.com/myCarousel. Поэтому DIV не может быть нацелен с использованием исходного кода и вашей версии jQuery.

Если вы не хотите, чтобы обновить JQuery, это может заставить вас идти:

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