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

Question

This script smooth scrolls my #anchor links and creates the appropriate offset due to a fixed header that varies in height.

After a few hours of troubleshooting/researching this, I cannot figure out why 'top' is undefined. Everything works as expected , but this error always occurs when I click the nav (a.anchorlink) from another page . Just before the page loads, this error pops up in the console. When the page then loads, this error is gone.

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

As you can see, I've ensured targetID exists (is not zero) in order to request the top property. Are there additional steps I can take or would you need more information about the page that is spitting the error?

Answer 1

I suggest to you do the next because of probably you element target doesn't exists:

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

You only was verifying the href's content but not if the element in DOM exists. So, with this double check, you ensure to try to do something with an non existent element.