彈出模態並跳轉到內部錨點

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

這是因為當您單擊 item1 時，您同時觸發了兩個單擊處理程序，一個來自$('.element-item')和一個來自$('.item1') 。 並且$('#item1').offset().top將是 0 因為它與display: none的容器。 您需要在設置顯示后觸發它。 像@marzelin 所做的那樣，這是更簡單的方法。