IE 中的 JavaScript 运行时错误 : Unable to get property 'top'

Question

问题背景:

我有一个导航栏，可以根据所选项目 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>

部门 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);

Answer 1

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

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