Setting documentElement.style.overflow = 'hidden' jolts to top of page (undesirably)

[TomCat]

I have a pop-up window system on my site that shows an absolutely-positioned div over the entire page as a "pop up" of sorts when someone clicks a link. I use this simple line of Javascript to disable page scrolling when a "pop up" box is opened by a user:

document.documentElement.style.overflow = document.body.style.overflow = 'hidden';

The problem is that when a user is scrolled down on a page and clicks a link to bring up one of my pop up boxes, when the overflow is set to 'hidden' to disable scrolling, the page "jolts" back up to the top (similar as to what would happen if someone clicked an <a> element with href="#" ). However, the links are not actually links, but span tags that are programmed with JS to trigger the scrollbar to be disabled when clicked, so that is not the culprit here. I've narrowed the problem down to that one line of code which I posted earlier. Apparently, setting the documentElement overflow style to 'hidden' scrolls the user to the top of the page automatically along with "disabling" the scroll bar on the page.

I am wondering if there is a way to prevent this jolting to the top of the page each time that JS code is triggered. I don't want users to have to scroll back down to where they were each time they open a pop up dialogue box on my site, as this would be detrimental for usability purposes. Thanks in advance for any help I receive.

[Logic Ali]

I am wondering if there is a way to prevent this jolting to the top of the page each time that JS code is triggered. I don't want users to have to scroll back down to where they were each time they open a pop up dialogue box on my site, as this would be detrimental for usability purposes. Thanks in advance for any help I receive.

<a href='#' id="barHide">No Scrollbars</a>

 <script type="text/javascript">
 
 document.getElementById( "barHide" ).onclick = noBars;
 
 function noBars()
 {
  var x = document.body.scrollLeft + document.documentElement.scrollLeft,
      y = document.body.scrollTop + document.documentElement.scrollTop;
    
  document.getElementsByTagName( 'body' )[ 0 ].style.overflow = 'hidden';  
    
  window.scrollTo( x, y );   
  
  return false; 
 }  
 </script>

Gratitude acknowledged by default.

[TomCat]

That did the trick. Thank you.