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

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/