错误：未被捕获的TypeError：无法读取未定义的属性“顶部”

Question

I have this code

jQuery(function($) {
    'use strict';

    $(window).scroll(function(event) {
        Scroll();
    });

    $('.navbar-collapse ul li a').on('click', function() {
        $('html, body').animate({
            scrollTop: $(this.hash).offset().top - 5 
        }, 1000);
        return false;
    });

    function Scroll() {
        var contentTop = [];
        var contentBottom = [];
        var winTop = $(window).scrollTop();
        var rangeTop = 200;
        var rangeBottom = 500;
        $('.navbar-collapse').find('.scroll a').each(function() {
            contentTop.push($($(this).attr('href')).offset().top);
            contentBottom.push($($(this).attr('href')).offset().top + $($(this).attr('href')).height());
        })
        $.each(contentTop, function(i) {
            if (winTop > contentTop[i] - rangeTop) {
                $('.navbar-collapse li.scroll')
                    .removeClass('active')
                    .eq(i).addClass('active');
            }
        })
    };

I tried keep getting this error when loading the code:
Uncaught TypeError: Cannot read property 'top' of undefined. The effected lines are 9 and 21

Just in case this helps, the site this code is loading on works fine as it's html file, but doesn't when its set up as a WHMCS theme The HTML this should be working with is

<nav id="main-nav" class="navbar navbar-default navbar-fixed-top" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <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" href="index.php"><img src="templates/six/images/logo.png" alt="logo"></a>
                </div>

                <div class="collapse navbar-collapse navbar-right">
                    <ul class="nav navbar-nav">
                        <li class="scroll active"><a href="#home" class="active">Home</a></li> 
            <li class="scroll"><a href="#features">Features</a></li>
                        <li class="scroll"><a href="#services">Services</a></li>
                        <li class="scroll"><a href="#domains">Domains</a></li> 
                        <li class="scroll"><a href="#pricing">Pricing</a></li>
                                                <li class="scroll"><a href="#clientarea">Client Area</a></li>
                                                <li class="scroll"><a href="#contact-us">Support</a></li>                        
                    </ul>
                </div>
            </div><!--/.container-->
        </nav>

Answer 1

The problem is this:

$($(this).attr('href')).offset().top

You are sending the result of getting the href into the Jquery $ function which will return an object with an undefined offset() as it's not part of the page.

$('my-a-tag').offset().top where my-a-tag finds your a tag uniquely will work, as long as my-a-tag exists on the page.

This jsfiddle here demonstrates. Open the console to see the difference between the object returned by your code and the object returned by the correct code. Also, see the offset() function working correctly.

Here's also an example line that should work in your code:

contentTop.push($(this).offset().top);

In this this case we just use this rather than a class like in the jsfiddle as we're in a loop which is going through all the anchors.