在JavaScript上获取“未捕获的TypeError：无法读取未定义的属性'top'”

Question

I'm using some code I found at Change url when manually scrolled to an id even scrolling to top? .

It works as intended, but Chrome's Console is giving me an error message, "Uncaught TypeError: Cannot read property 'top' of undefined", for the line:

var currentElementTop = $(blocksArr[i]).offset().top;

I'd like to get rid of this error, so what do I need to change/add?

(BTW, I would post this question as a comment on the original post, but for some reason I need a reputation of 50...?)

Here's the code in action:

 $(function () { var currentHash = "#"; var blocksArr = $('.anchor'); $(document).scroll(function () { var currentTop = window.pageYOffset/1; for (var i=0; blocksArr.length; i++){ var currentElementTop = $(blocksArr[i]).offset().top; var hash = $(blocksArr[i]).attr('id'); if (currentElementTop < currentTop && currentTop < currentElementTop + $(blocksArr[i]).height() && currentHash!=hash){ if(history.pushState) { history.pushState(null, null, '#'+hash); } else { location.hash = '#'+hash; } currentHash = hash; } } }); }); 

  html, body { height: 100%; min-height: 100%; font-size: 100%; text-shadow:none; margin: 0; } div { min-height: 100%; font-size: 100px; padding: 25px 50px; } .hero { line-height: 30vh; padding: 35vh 10vh; max-height: 100vh; min-height: auto; text-align: center; } .red { background: orangered; color: white; } .white { background: ghostwhite; color: black; } .blue { background: blue; color: white; } 

 <div id="Hero" class="anchor red hero">Hero</div> <div id="About" class="anchor white">About</div> <div id="What" class="anchor blue">What</div> <div id="Why" class="anchor white">Why</div> <div id="Contact" class="anchor red">Contact</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 1

Your for statement is wrong.

for (var i=0; blocksArr.length; i++){ 

So if you loop makes it to the end of the array it keeps going and it will not have an element. So when you get to i = blocksArr.length , that is when the error occurs. jQuery is doing $(undefined).offset().top and you get the error.

for (var i=0; i < blocksArr.length; i++){ 

Answer 2

You could try use each :

$('.anchor').each((index, obj) => {
    var currentElementTop = $(obj).offset().top;

    var hash = $(obj).attr('id');
    if (currentElementTop < currentTop && currentTop < currentElementTop + $(obj).height() && currentHash!=hash){
        if(history.pushState) {
            history.pushState(null, null, '#'+hash);
        } else {
            location.hash = '#'+hash;
        }
        currentHash = hash
     }
});

Answer 3

This line:

for (var i=0; blocksArr.length; i++){

should be

for (var i=0; i<blocksArr.length; i++){

You're looping from 0 until truthy (blocksArr.length == true) - which it always is. You don't get an infinite loop because it crashes out on

blocksArr[blocksArr.length]

(as array's are 0 based, this should stop at blocksArr[blocksArr.length-1] )

If you were to catch/ignore this, your code would get stuck in an infinite loop.

 $(function () { var currentHash = "#"; var blocksArr = $('.anchor'); $(document).scroll(function () { var currentTop = window.pageYOffset/1; for (var i=0; i<blocksArr.length; i++){ var currentElementTop = $(blocksArr[i]).offset().top; var hash = $(blocksArr[i]).attr('id'); if (currentElementTop < currentTop && currentTop < currentElementTop + $(blocksArr[i]).height() && currentHash!=hash){ if(history.pushState) { history.pushState(null, null, '#'+hash); } else { location.hash = '#'+hash; } currentHash = hash; } } }); }); 

 html, body { height: 100%; min-height: 100%; font-size: 100%; text-shadow:none; margin: 0; } div { min-height: 100%; font-size: 100px; padding: 25px 50px; } .hero { line-height: 30vh; padding: 35vh 10vh; max-height: 100vh; min-height: auto; text-align: center; } .red { background: orangered; color: white; } .white { background: ghostwhite; color: black; } .blue { background: blue; color: white; } 

 <div id="Hero" class="anchor red hero">Hero</div> <div id="About" class="anchor white">About</div> <div id="What" class="anchor blue">What</div> <div id="Why" class="anchor white">Why</div> <div id="Contact" class="anchor red">Contact</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 4

You might want to wrap the offending line in a try-catch block. If you are breaking on the error (which it doesn't sound like you are), this will prevent that. Otherwise, this might give you a little bit more detail on what the error is.

Something along these lines:

try {
  var currentElementTop = $(blocksArr[i]).offset().top;
}
catch(err) {
  console.log(err.message);
}