How to get rid of the jump when you change the display property?

In the implementation of news module on the website where the news are displayed in pop-up Windows detected a bad time - jump to top of page when changing the display property to block, which displays news. And another question: how can I bind to the click event on a free from the window pane to close it? I attach the code:
HTML
<div class="news-block" onclick="openart('article')"> 
 <img src="img/news/article4.jpg" alt="">
 <div class="news__text-preview">
 <!-- Preview text -->
</div>
</div>
<!-- Window news -->.
<div class="pop-up_wrapper" id="article__wrap">
 <div class="pop-up_news-page">
 <div class="header-news">
 <img src="img/news_header.png" alt="">
the <h3>news</h3>
 <a href="#" class="close" onclick="closeart('article')"></a>
</div>
<div class="article_body" id="article__content">
 <img src="img/news/article3.jpg" class="news_img" alt="">
<h4>example</h4>
 <p>example</p> 
</div>
</div>
</div>

CSS
.pop-up_wrapper {
 position: fixed;
 z-index: 25;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgba(0,0,0,0.4);
}
.pop-up_news-page {
 background-color: #fff;
 margin: 5% auto;
 width: 1000px; 
}

JS
function openart(article){
document.getElementById('article__wrap').style.display='block';
document.getElementById('article__content').style.display='block';
document.body.style.overflow='hidden';
}
closeart function(article){
document.getElementById('article__wrap').style.display='none';
document.getElementById('article__content').style.display='none';
document.body.style.overflow='auto';
}

Actually the test site:
test.sro01.ru
March 19th 20 at 08:47
2 answers
March 19th 20 at 08:49
Solution
Apparently the problem is that you use a link (a) with the anchor #

<a href="#" class="close" onclick="closeart('article')"></a>


Replace the span. It should work.
You can just event.preventDefault(); if for some reason you need the same link - koby commented on March 19th 20 at 08:52
March 19th 20 at 08:51
Before opening to consider scrollTop for body, after closing back.
and free from the window area you have the same pop-up_wrapper to it, and click to hang for closure.
To simply click on the wrapper, child elements are also triggers to close the window. How to avoid it? - geovany.Dougl commented on March 19th 20 at 08:54
@geovany.Dougl, it is possible to make the wrapper.
<div class="wrapper-modal"></div><div class="modal"></div>

there is still a difference in the event in the event.target and event.currentTarget. I can not remember right now exactly, but one after the other parent for the sub. it is necessary to craniate that they are equal. - koby commented on March 19th 20 at 08:57

Find more questions by tags LayoutHTMLJavaScriptCSS