IE 中的 JavaScript 运行时错误：无法获取属性“顶部”

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' 属性如何为空或为空？

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

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

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

如果您不想升级 jQuery，这可能会让您继续前进：

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

Answer 2

我在 IE 上遇到过几次这个问题（太令人沮丧了）。如果不查看您的 CSS，（我发现）的主要原因是它找不到父元素的高度/位置。如果IE找不到它，它会自动搜索'body'（或'html'）标签定位。尤其是在使用相对定位时会发生这种情况。

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

希望这会有所帮助！

附：使用您的 CSS 更新可能会有所帮助。

Answer 3

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

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