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

Question

Case sensitive links don't work on chrome. If name of anchor is link#Anchor1 will not work, and link#anchor1 will.

I went ahead and searched for solution and found .toLowerCase() function. Now I have a new issue I couldn't fix: 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);

  });

It partially works on Firefox, except for the offset value, either +200 or -200 it won't make a difference (it's behind the navigation bar) but it doesn't move a inch on Chrome.

Answer 1

Try like below. First select all the a elements with name attribute and then filer with comparing to windows hash.

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

Checkout code below. It's scrolls to 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>