错误：未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的

Question

我有这段代码

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');
            }
        })
    };

我尝试在加载代码时不断收到此错误：
未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的。 受影响的线是9和21

万一这有用，这个代码加载的网站可以正常运行，但是当它设置为WHMCS主题时却没有 这个应该使用的HTML是

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