弹出模态并跳转到内部锚点

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(() =>&nbsp;&nbsp; &nbsp; $('#contributors').animate( { scrollTop: $('#item1').offset().top -40 }, 500))});https://jsfiddle.net/onbmh7ur/