javascript - IE中的JavaScript运行时错误:无法获取属性“top”

问题背景：

我有一个导航栏，可根据选定的项目ID将其“平滑滚动”到相应的div。

问题：

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

Div ID：

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

          /*CODE*/

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

当此代码在Chrome上正常运行时，我不明白'top'属性如何为null或为空？

****编辑2-添加了新的JavaScript代码：****

经过更多调查后，由于以下原因导致了错误：

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

这将为“ sectionID”返回“未定义”属性。

我已经修改了代码，以在下拉列表中实现“ data-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);

最佳答案

使用您提供的HTML代码，即使在IE（11）中，脚本也适用于“项​​目”项。但是，它在其他项目（“欢迎”，...）上失败，并带有您提到的错误消息。我猜您的ID中有一个或几个不正确：请检查页面中是否存在“欢迎”，“功能”，“关于”和“位置”（也请注意ID的大小写）。

如我先前所写，如果将offset()应用于错误的选择器，则可能返回null。