Javascript chrome不工作的向上滚动事件

所以我有一个简单的布局

<a name="#A1"></a>
<div></div>
<a name="#A2"></a>
<div></div>
<a name="#A3"></a>
<div></div>

我正在使用下面的脚本跳转到鼠标滚动事件的下一个锚点。我已经测试过了，它可以在Firefox和IE上运行，但在Chrome上，只有向下滚动才有效，当你向上滚动时，什么也不会发生

(function() {
  var delay = false;

  $(document).on('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('a');
    if(wd < 0) {
      for(var i = 0 ; i < a.length ; i++) {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }
    }
    $('html,body').animate({
      scrollTop: a[i].offsetTop
    });
  });
})();

（函数（）{
var延迟=假；
$（文档）.on（'mousewheel-DOMMouseScroll'，函数（事件）{
event.preventDefault（）；
如果（延迟）返回；
延迟=真；
setTimeout（函数（）{delay=false}，200）
var wd=event.originalEvent.wheelDelta | |-event.originalEvent.detail；
var a=document.getElementsByTagName（'a'）；
如果（wd<0）{
对于（变量i=0；i=40）中断；
}
}
否则{
对于（变量i=a.length-1；i>=0；i--）{
var t=a[i]。getClientRects（）[0]。顶部；
如果（t<-20）断裂；
}
}
$（'html，body'）。设置动画({
scrollTop:a[i]。偏移设置
});
});
})();

---

im获取的错误为未捕获类型错误：无法读取未定义的属性“top”

如果您试图获取元素的计算的

top

，这看起来不正确

var t = a[i].getClientRects()[0].top;

这应该使用

offsetTop

var t = a[i].getClientRects()[0].offsetTop;

从

如果调用它的元素没有关联的 布局框返回空序列并停止此算法

getClientRects（）

函数可能返回空列表。因此

[0]

索引处的元素可能不存在（未定义）。因此，您应该在访问列表中的元素之前检查列表的长度。

将“getElementsByTagName”更改为“getElementsByClassName” （功能（）{ var延迟=假

$(document).on('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
if(delay) return;

delay = true;
setTimeout(function(){delay = false},200)

var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

var a = document.getElementsByClassName("full-height");
if(wd < 0) {
  for(var i = 0 ; i < a.length ; i++) {
    var t = a[i].getClientRects()[0].top;
    if(t >= 40) break;
  }
}
else {
  for(var i = a.length-1 ; i >= 0 ; i--) {
    var t = a[i].getClientRects()[0].top;
    if(t < -20) break;
  }
}
$('html,body').animate({
  scrollTop: a[i].offsetTop
});
});
})();

$（文档）.on（'mousewheel-DOMMouseScroll'，函数（事件）{
event.preventDefault（）；
如果（延迟）返回；
延迟=真；
setTimeout（函数（）{delay=false}，200）
var wd=event.originalEvent.wheelDelta | |-event.originalEvent.detail；
var a=document.getElementsByCassName（“全高”）；
如果（wd<0）{
对于（变量i=0；i=40）中断；
}
}
否则{
对于（变量i=a.length-1；i>=0；i--）{
var t=a[i]。getClientRects（）[0]。顶部；
如果（t<-20）断裂；
}
}
$（'html，body'）。设置动画({
scrollTop:a[i]。偏移设置
});
});
})();

getClientRects（）返回矩形，而不是DOM元素。因此，对于其他有此问题的人，我了解到“getElementsByTagName”被chrome阻止，因此我为所有div设置了一个类，并使用了“getElementsByClassName”，现在一切都很顺利。