# Popup modal and jump to anchor inside

**URL:** <https://forum.kirupa.com/t/popup-modal-and-jump-to-anchor-inside/640826>\
**Category:** Uncategorized\
**Created:** [October 12, 2019, 8:53pm UTC](https://forum.kirupa.com/t/popup-modal-and-jump-to-anchor-inside/640826 "2019-10-12T20:53:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [October 12, 2019, 8:53pm UTC](https://forum.kirupa.com/t/popup-modal-and-jump-to-anchor-inside/640826/1 "2019-10-12T20:53:45Z")

</div>

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.

Thanks  
HTML

> ```
> <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>
> 
> ```

JS

> ```
> //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); });
> 
> ```

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

`

[Here is a fiddle](https://jsfiddle.net/postcolonialboy/x28bw14d/)

---

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [October 12, 2019, 9:31pm UTC](https://forum.kirupa.com/t/popup-modal-and-jump-to-anchor-inside/640826/2 "2019-10-12T21:31:08Z")

</div>

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)
> 
> )});
> 
> ```