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

Question

区分大小写的 link 不适用于 chrome。如果锚的名称是 link#Anchor1 将不起作用，而 link#anchor1 将起作用。

我继续搜索解决方案并找到了 .toLowerCase() 函数。现在我遇到了一个无法解决的新问题：Uncaught TypeError: anchorEl.offset is not a function

  $(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

像下面这样尝试。首先 select 所有具有 name 属性的 a 元素，然后与 windows 哈希进行比较的文件管理器。

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

下面的结帐代码。它滚动到 300 像素；

$(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>

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

Case sensitive anchor issue on Chrome

javascript

anchor

typeerror