# Jumping to anchor within modal with a fixed header

**URL:** <https://forum.kirupa.com/t/jumping-to-anchor-within-modal-with-a-fixed-header/640827>\
**Category:** Uncategorized\
**Created:** [October 12, 2019, 11:47pm UTC](https://forum.kirupa.com/t/jumping-to-anchor-within-modal-with-a-fixed-header/640827 "2019-10-12T23:47:54Z")\
**Posts on this page:** 1\
**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, 11:47pm UTC](https://forum.kirupa.com/t/jumping-to-anchor-within-modal-with-a-fixed-header/640827/1 "2019-10-12T23:47:54Z")

</div>

Hi all,

I am having a bit of a problem.  
I have a script that is for nested modals, that when a link is clicked it jumps straight to an anchor. It works fine.

However when styling, I would like to have a fixed header as the “.content” div scrolls to the anchor.

When “.content” has a height of 80vh it looks fine, but the script doesn’t scroll to the anchor.

When “.content” has a height of 80% the script works, but the fixed header doesn’t stay fixed and scrolls with the “.content”.

How can I have the script work, but keep a fixed header.

Thanks

[FIDDLE](https://jsfiddle.net/postcolonialboy/541qsetp/16/)

HTML  
\> [Bailey](#contributors)  
\> [Huijnen](#contributors)  
\>  
\>

  
\> 
  
\> ×  
\> 
## Contributors
  
\>   
\> 
  
\>   
\>   
\>   
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
\> 
  
\> 
#### Huijnen
  
\> 
  
\>   
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
\> 
  
\> 
#### Bailey
  
\> 
  
\>   
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
\>   
\>   
\> 
  
\> 
  
\> 

JS

> ```
> //popup nest 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
> $('.huijnen').on('click', function(e) {
> requestAnimationFrame(() =>
> $('#contributors').animate({
> scrollTop: $('#huijnen').offset().top - 40
> }, 500))
> });
> $('.bailey').on('click', function() {
> requestAnimationFrame(() => $('#contributors').animate({
> scrollTop: $('#bailey').offset().top - 40
> }, 500))
> });
> 
> ```

CSS

> ```
> .modal { box-sizing: border-box; display: none; position: fixed; z-index: 1; padding-top: 3.125rem; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; transition: all 1.0s ease; }
> /* The Close Button */
> .close { z-index: 1000; font-size: 3vw; float: right; transition: all 0.3s ease; }
> /* Modal Content */
> header, .content { width: 60%; margin: auto; }
> .content { height: 80%; padding-top: 3%; padding-bottom: 3%; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow: auto; min-height: 0; font-size: 2vw; }Hi all,
> 
> ```

I am having a bit of a problem.  
I have a script that is for nested modals, that when a link is clicked it jumps straight to an anchor. It works fine.

However when styling, I would like to have a fixed header as the “.content” div scrolls to the anchor.

When “.content” has a height of 80vh it looks fine, but the script doesn’t scroll to the anchor.

When “.content” has a height of 80% the script works, but the fixed header doesn’t stay fixed and scrolls with the “.content”.

How can I have the script work, but keep a fixed header.

Thanks

HERE IS A FIDDLE  
[https://jsfiddle.net/postcolonialboy/541qsetp/16/](https://jsfiddle.net/postcolonialboy/541qsetp/16/)

HTML  
[Bailey](#contributors)  
[Huijnen](#contributors)

×
## Contributors

  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line 

#### Huijnen

  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line 

#### Bailey

  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line  
line 

JS  
//popup nest 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  
$(‘.huijnen’).on(‘click’, function(e) {  
requestAnimationFrame(() =\>  
$(‘#contributors’).animate({  
scrollTop: $(‘#huijnen’).offset().top - 40  
}, 500))  
});  
$(‘.bailey’).on(‘click’, function() {  
requestAnimationFrame(() =\> $(‘#contributors’).animate({  
scrollTop: $(‘#bailey’).offset().top - 40  
}, 500))  
});

CSS  
.modal { box-sizing: border-box; display: none; position: fixed; z-index: 1; padding-top: 3.125rem; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; transition: all 1.0s ease; }  
/\* The Close Button _/  
.close { z-index: 1000; font-size: 3vw; float: right; transition: all 0.3s ease; }  
/_ Modal Content \*/  
header, .content { width: 60%; margin: auto; }  
.content { height: 80%; padding-top: 3%; padding-bottom: 3%; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow: auto; min-height: 0; font-size: 2vw; }