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>

这将返回“sectionID”的“undefined”属性

我已修改代码以实现下拉列表中的“数据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>

如果我硬编码了一个div ID，例如“myCarosuel”，那么它可以很好地工作，即：

---

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

---

如前所述，如果应用于错误的选择器，偏移量可能返回null

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

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

希望这有帮助

---

另外，用CSS更新可能会有所帮助

升级jQuery可能会解决此问题。看看它失败的原因

您的DIV具有myCarousel id，但sectionID在IE中可能如下所示：http://example.com/myCarousel. 因此，无法使用原始代码和jQuery版本以DIV为目标

如果您不想升级jQuery，这可能会让您：

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

---

您使用的是哪个版本的jQuery？@dejakob只是想把东西扔到墙上，您是否尝试过在顶部添加括号？比如$id.offset.top？@trnelson谢谢你的评论。我试过了，但Top是一个属性而不是一个方法。有关可能的解决方案，请参阅。@M.Page感谢您的回复。我理解你的意思，但我也理解为什么它在Chrome和FireFox中工作得很好，但在IE中找不到id。我添加了一个Edit2部分来显示JavaScript中发生错误的地方-如果我硬编码了一个div id，那么问题就不会发生。真是令人难以置信的沮丧！

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

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

 $(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);
        }
    });

    scrollToID('#myCarosuel, 750);

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