Всплывающее модальное и прыгать на якорь

Question

Я пытаюсь создать ссылку, при нажатии на которую появляется модал, а также перепрыгивает к нему в якорь.

На данный момент вы увидите, что у меня есть некоторый код для всплывающего окна (которыйнастроен для набора вложенных модалов), следовательно, это не стандартная настройка.

При двойном нажатии на ссылки они работают. Как я могу заставить его работать как есть, только одним щелчком мыши.

Вот скрипка

      //popup nested modals
      $(function () {
    const openModals = [];
    $('.element-item').click(e => {
      e.preventDefault();
      $(e.currentTarget).closest('.modal').add('body').addClass('open');
      openModals.push($($(e.currentTarget).attr('href')).show());
    });
    $(window).add('.close').click(e => {
      e.stopPropagation();
      if ($(e.target).is('.modal, .close')) {
        const closing = openModals.pop().addClass('modal-content-active');
        setTimeout(() => {closing.hide().removeClass('modal-content-active')}, 0);
        if (openModals.length > 0) {
          openModals[openModals.length - 1].removeClass('open');
        } else $('body').removeClass('open');
      }
    });
  });
  
 //jump to anchor in modal
    $('.item1').on('click',function(){ $('#contributors').animate( { scrollTop: $('#item1').offset().top -40 }, 500); });
  $('.item2').on('click',function(){ $('#contributors').animate( { scrollTop: $('#item2').offset().top -40 }, 500); });

.modal{
    width: 300px;
    height: 200px;
    overflow: auto;
   display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#contributors" class="element-item item1">item1</a>
    <a href="#contributors" class="element-item item2">item2</a>
        
  <!-- The Modal -->
  <div id="contributors" class="modal">
        <header><span class="close">×</span></header>
   line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
      <div class="item" id="item1"><h4>Item 1</h4></div>
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
<div class="item" id="item2"><h4>Item 2</h4></div>
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
  </div>

Answer 1

Проблема в том, что макет обновляется только после выполнения обоих обработчиков щелчков. Быстрое решение - обернуть обработчик с помощью requestAnimationFrame:

$('.item1').on('click',function(){ requestAnimationFrame(() => 
    $('#contributors').animate( { scrollTop: $('#item1').offset().top -40 }, 500)
)});

https://jsfiddle.net/onbmh7ur/

Answer 2

Это потому, что когда вы нажимаете на элемент 1, вы одновременно запускаете оба обработчика щелчков: один из $('.element-item') и один из $('.item1'). И $('#item1').offset().top будет 0, потому что контейнер с display: none. Вы должны запустить его после того, как дисплей был установлен. Делай, как сделал @marzelin, так проще.