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>