Jquery 单页网站上的活动div问题

我正在创建我的第一个单页网站

下面是一个JSFIDLE：

当你在页面中滚动时，链接的颜色应该改变，以显示用户他们在该页面上，到目前为止这一切正常，问题在于第一个div

当你第一次进入网站时，第一个链接应该显示为活动状态，即文本应该是蓝色的，这不会发生，直到你先滚动一点，然后工作正常

被困在飞机上一个小时了，真的很简单

以下是jquery：

jQuery(document).ready(function($) {   
var offsetHeader = 60;

$('.scroll').click(function(){
    var $target = $($(this).attr('href'));
    $(this).parent().addClass('active');
    $('body').stop().scrollTo( $target , 800, {'axis':'y', offset: -offsetHeader});
    return false;
});

/**
     * This part handles the highlighting functionality.
     * We use the scroll functionality again, some array creation and 
     * manipulation, class adding and class removing, and conditional testing
     */
    var aChildren = $("nav li").children(); // find the a children of the list items
    var aArray = []; // create the empty aArray
    for (var i=0; i < aChildren.length; i++) {    
        var aChild = aChildren[i];
        var ahref = $(aChild).attr('href');
        aArray.push(ahref);
    } // this for loop fills the aArray with attribute href values

    $(window).scroll(function(){
        var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
        var windowHeight = $(window).height(); // get the height of the window
        var docHeight = $(document).height();

        for (var i=0; i < aArray.length; i++) {
            var theID = aArray[i];
            var divPos = $(theID).offset().top-60; // get the offset of the div from the top of page
            var divHeight = $(theID).height(); // get the height of the div in question
            if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                $("a[href='" + theID + "']").addClass("active");
            } else {
                $("a[href='" + theID + "']").removeClass("active");
            }
        }

        if(windowPos + windowHeight == docHeight) {
            if (!$("nav li:last-child a").hasClass("nav-active")) {
                var navActiveCurrent = $(".nav-active").attr("href");
                $("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
                $("nav li:last-child a").addClass("nav-active");
            }
        }
    });
});

jQuery（document）.ready（函数（$）{
var offsetHeader=60；
$（'.scroll'）。单击（函数（）{
var$target=$（$（this.attr（'href'））；
$（this.parent（）.addClass（'active'）；
$（'body'）.stop（）.scrollTo（$target，800，{'axis'：'y'，offset:-offsetHeader}）；
返回false；
});
/**
*此部分处理突出显示功能。
*我们再次使用滚动功能，创建一些数组和
*操作、类添加和类删除以及条件测试
*/
var aChildren=$（“nav li”）.children（）；//查找列表项的a子项
var aArray=[]；//创建空的aArray
对于（var i=0；i=divPos&&windowPos<（divPos+divHeight））{
$（“a[href=”“+theID+”]”）addClass（“活动”）；
}否则{
$（“a[href=”“+theID+”]”）removeClass（“活动”）；
}
}
如果（窗口位置+窗口高度==8）{
if（！$（“导航李：最后一个孩子a”）.hasClass（“导航活动”））{
var navActiveCurrent=$（“.nav active”）.attr（“href”）；
$（“a[href='”+navActiveCurrent+“']”）。removeClass（“nav active”）；
$（“nav li:最后一个子a”）.addClass（“nav活动”）；
}
}
});
});

您的jQuery在锚点上使用了

active

类，但您在第一个元素上使用了

li

的active类，只需将其移动到锚点标记，如下所示：

<li><a class="scroll active" href="#test1">test1</a></li>

---

当站点打开时，是否总是从顶部开始？如果是这样，你可以简单地使用css！不，如果你刷新页面，它将从原来的位置开始，可能是页面的一半。你的初始

活动
类应该在
标记上，而不是
上。我看到移动活动类解决了第一次加载的问题，但是如果页面从第二个链接开始。。。您必须使用jQuery！