jQuery控制台错误:无法读取属性'top'的未定义

jQuery Console Error: Cannot read property 'top' of undefined

本文关键字：top 未定义 属性 读取 错误 控制台 jQuery      更新时间：2023-09-26

此脚本平滑滚动我的#anchor链接，并由于固定的标头高度不同而创建适当的偏移量。

经过几个小时的故障排除/研究，我不明白为什么"top"是未定义的一切都按预期运行，但当我从另一个页面点击导航（a.anchrlink）时，总是会出现此错误。就在页面加载之前，控制台中会弹出此错误。当页面加载时，这个错误就消失了。

jQuery:

jQuery(document).ready(function($){
    var $root = $('html, body');
    function getFixedOffset($) {
        if($(window).scrollTop() === 0) {
            return 100;
        }
        else {
            return 55;
        }
    }
    $('a.anchorlink').click(function() {
        var href = $.attr(this, 'href');
        var targetID = href.substr(href.indexOf("#") + 1);
        if (targetID.length) {
            var lengthID = $("#" + targetID).offset().top;
            $root.animate({
                scrollTop: lengthID - getFixedOffset($)
            }, 850, function() {
                window.location.hash = lengthID;
            });
            return false;
        }
    });
})

HTML:

<ul class="menu">
  <li"><a href="/about#mission" class="anchorlink">Sub-link 1</a></li>
  <li"><a href="/about#history" class="anchorlink">Sub-link 2</a></li>
</ul>
<!-- All other pages don't have hashes and will spit the error before load -->

正如您所看到的，我已经确保targetID存在（不是零），以便请求top属性。我可以采取其他步骤吗？或者你需要更多关于吐出错误的页面的信息吗？

我建议你做下一步，因为可能你的元素目标不存在：

if (targetID.length && $("#" + targetID).length > 0) {...

您只验证了href的内容，但没有验证DOM中是否存在元素。因此，通过这种双重检查，您可以确保尝试使用不存在的元素执行某些操作。

相关文章：