Popup modal and jump to anchor inside

Hi all,

I am trying to create a link that when clicked, a modal pops up, and also jumps to an anchor in it.

At the moment you will see i have some code for the pop up (which is configured for a set of nested modals) hence it is not your standard setup.

When you click on the links twice, they work. How can I get it to work as is, with one click only.


<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>
<div class="item" id="item1"><h4>Item 1</h4></div>
<div class="item" id="item2"><h4>Item 2</h4></div>


//popup nested modals
$(function () {
const openModals = [];
$('.element-item').click(e => {
$(window).add('.close').click(e => {
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; }`


Here is a fiddle

over at stackexchange @marzelin suggested the following which works fine:

The problem is that the layout updates only after both click handlers are done. A quick fix is to wrap a handler with requestAnimationFrame:

$('.item1').on('click',function(){ requestAnimationFrame(() => 

    $('#contributors').animate( { scrollTop: $('#item1').offset().top -40 }, 500)