使用jQuery和scrollTo插件滚动

Question

我想在我正在开发的网站上实现ScrollSpy。

这里是我在下面

Tutorial

这里演示本教程的链接：

Demo

我想他们的脚本适应我的需要，但我不断收到错误的JavaScript，控制台说，“无法读取属性'顶'的未定义”

这里是我的JavaScript

*/$(document).ready(function(){ 


$(".menu li a").click(function(evn){ 
    evn.preventDefault(); 
    $('html,body').scrollTo(this.hash, this.hash); 
}); 

/** 
* 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 = $(".menu 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]; 
     if (theID.length) { 
      var divPos = $(theID).offset().top; 
      var divHeight = $(theID).height(); // get the height of the div in question 
      if (windowPos >= divPos && windowPos < (divPos + divHeight)) { 
       $("a[href='" + theID + "']").parent().addClass("active"); 
      } else { 
       $("a[href='" + theID + "']").parent().removeClass("active"); 
      } 
     } 
    } 

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

和这里的网站我开发

Web-Site

谁能帮助我？

Answer 1

问题是你使用href作为jQuery的选择器。你需要作出正确的选择：

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

应改为：

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