Chrome上区分大小写的锚点问题

Question

区分大小写的链接不适用于chrome。 如果锚点名称为link＃Anchor1将不起作用，而link＃anchor1将起作用。

我继续搜索解决方案，发现.toLowerCase（）函数。 现在我有一个新的问题我无法解决：Uncaught TypeError：anchorEl.offset不是一个函数

  $(window).load(function()
  {
    var hashVal= window.location.hash.substring(1).toLowerCase();
    var anchorEl = $("a[name='"+hashVal+"']").toLocaleString().toLowerCase().split(',');
    var elOffset = anchorEl.offset();
    var offsetTop = elOffset.top;
    $(document).scrollTop( offsetTop - 200);
    console.log(offsetTop);

  });

它可以部分在Firefox上运行，除了偏移值+200或-200之外，它没有任何区别（位于导航栏后面），但在Chrome上不会移动一英寸。

Answer 1

尝试如下。 首先选择具有name属性的所有a元素，然后将其与Windows哈希进行比较。

var anchorEl = $("a[name]").toArray().filter(function(a) {
    return $(a).attr('name').toLowerCase() == hashVal.toLowerCase();
});
var elOffset = $(anchorEl).offset();

结帐代码如下。 滚动到300px；

 $(window).load(function() { var hashVal = "Action"; //window.location.hash.substring(1).toLowerCase(); var anchorEl = $("a[name]").toArray().filter(function(a) { return $(a).attr('name').toLowerCase() == hashVal.toLowerCase(); }); if (anchorEl.length > 0) { var elOffset = $(anchorEl).offset(); var offsetTop = elOffset.top; $(document).scrollTop(offsetTop - 200); console.log(offsetTop); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div style="margin-top: 300px;"> <a href="#" name="action"> action </a> </div> <div style="margin-bottom: 300px;"> <a href="#" name="action2"> action2 </a> </div>