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

时间:2016-05-12 17:47:50

标签: javascript jquery

此脚本可以平滑地滚动我的#anchor链接,并根据高度不同的固定标题创建适当的偏移量。

经过几个小时的故障排除/研究后,我无法弄清楚为什么'top'未定义。 一切都按预期工作,但是当我从另一个页面点击导航(a.anchorlink)时,总会出现此错误。在页面加载之前,控制台中会弹出此错误。当页面加载时,此错误消失。

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属性。我可以采取其他步骤,还是需要有关吐出错误的页面的更多信息?任何有关这方面的帮助将不胜感激!

1 个答案:

答案 0 :(得分:1)

我建议你做下一个,因为可能你的元素目标不存在:

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

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