Чувствительная к регистру проблема привязки в Chrome - PullRequest
Новая
       5

Чувствительная к регистру проблема привязки в Chrome

0 голосов
/ 07 января 2019

Чувствительные к регистру ссылки не работают на Chrome. Если имя якоря - ссылка # Anchor1 не будет работать, а ссылка # 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.

1 Ответ

0 голосов
/ 07 января 2019

Попробуйте как ниже. Сначала выберите все элементы a с атрибутом name, а затем файлер по сравнению с хэшем 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>
...