Question

问题背景：

我有一个可以顺畅滚动的导航栏＆＃39;基于所选项目ID到相应的div。

问题：

在Chrome和FireFox中没有任何问题，当我尝试从IE（版本11）的导航栏中选择一个选项时，会显示以下JavaScript错误：

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

代码：

这是Smooth Scroll的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>

我不明白＆＃39; top＆＃39;当此代码在Chrome上运行正常时，属性可以为null或为空？

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

经过一些更多的调查之后，由于这一行而导致错误：

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

这是一个未定义的＆＃39; ＆section;＆＃39; sectionID＆＃39;。

的属性

我修改了我的代码以实现＆＃39; data-id＆＃39;下拉列表中的属性：

      <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进行硬编码，例如＆＃39; #myCarosuel＆＃39;那么这很有效：

    scrollToID('#myCarosuel, 750);

Answer 1

使用您提供的HTML代码，您的脚本适用于＆＃34;项目＆＃34;项目，甚至在IE（11）中。但是，它在其他项目（＆＃34;欢迎＆＃34;，...）上失败，并显示您提到的错误消息。我猜你的一个或几个你的身份不正确：检查＆＃34;欢迎＆＃34;，＆＃34;功能＆＃34;，＆＃34;关于＆＃34;和＆＃34;位置＆＃34;存在于您的页面中（也要注意id情况）。

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

Answer 2

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

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

希望这有帮助！

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。因此，无法使用您的原始代码和您的jQuery版本来定位DIV。

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

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

IE中的JavaScript运行时错误：无法获取属性＆＃39; top＆＃39;

3 个答案: