Почему scrollbar в браузере прокручивается вверх при вызове popup-окна?

Dima83

Новичок
Делаю всплывающее окно для просмотра картинок, также с помощью этого окна будут появляться ссылки на соц.сети которые предназначены как элементы социального замка и разблокировки контента. Столкнулся со следующее проблемой. Если на веб-странице присутствует текст и появляется вертикальная полоса прокрутки, то при нажатии на кнопку вызова popup-окна, полоса сколлбар прокручивается вверх. Это проблема появляется только когда я вызываю социальные сети, с картинками такой проблемы нет.

Причину удалось установить, дело в том что я использую тег “a href”, а для соц. Сетей тег “div”. Стоит только заключить картинку ссылку в контейнер, как скроллбар, также перескакивает вверх.

Перепробовав несколько вариантов мне удалось выявить некоторые причины почему так происходит.

1. У меня в коде есть такие строки.

JavaScript:
if ( placeholder ) {
            placeholder.focus();
            placeholder = null;
        }
Если их убрать, то scrollbar прокручиваться вверх будет уже в обоих вариантах, т.е. на картинке и на ссылке.

2. Чтобы запретить прокручивать контент, я убираю scrollbar с помощью этого кода.
JavaScript:
    if ( localSettings.preventBGScroll ) {
               if ( localSettings.preventBGScrollHtml ) {
                   document.documentElement.style.overflowY = 'hidden';
               }
              if ( localSettings.preventBGScrollBody ) {
                  document.body.style.overflowY = 'hidden';
               }
               document.body.style.paddingRight = '16px';
           }
Если этот код удалить чтобы страница прокручивалась при всплывающем окне, то в этом случае проблема будет устранена и scrollbar перестанет подпрыгивать при открытии popup окна.

3. Еще одна проблема заключается в стилях. В css есть такой параметр height:100%;. Расположен он вот здесь.
CSS:
html, body {margin:0;height:100%;font:100% tahoma, arial, sans-serif;font-size:14px;}
Если код js не трогать вообще и просто убрать свойства "height:100%; ", то проблема решиться и scrollbar перестанет прокручиваться вверх в обоих случаях (что с соцсетями, что с ссылками). Однако меня не устраивает, что приходиться менять стили для внедрения новых возможностей для сайта. Помогите пожалуйста разобраться в чем может быть проблема?
Вот мой код:
HTML:
<script src="https://mysite5.su/js/jquery-1.9.1.js"></script>
<link rel="StyleSheet" type="text/css" href="style.css">

<div id="message"></div>
<div id="loader"></div>
<div>ЛОНГРИД</div>
<script language='JavaScript1.1' type='text/javascript'>
var isTouch, startX, startY, distX, distY, placeholder;
var state = 'closed';

  var settings = {
        selectorToggle: '[data-modal]',
        selectorWindow: '[data-modal-window]',
        selectorClose: '[data-modal-close]',
        selectorVK: '[data-modal-vkontakte]',
        selectorMail: '[data-modal-mail]',
        selectorOK: '[data-modal-ok]',
        modalActiveClass: 'active',
        modalBGClass: 'modal-bg',
        modalClass: 'modal',
        modalShow: '#modal2',
        preventBGScroll: true,
        preventBGScrollHtml: true,
        preventBGScrollBody: true,
        backspaceClose: true,
        stopVideo: true,
        callbackOpen: function () {},
        callbackClose: function () {}
    };


openModal = function (toggle,modalID) {

var localSettings = settings;

var modal = document.querySelector(settings.modalShow);

if ( toggle )
{
  placeholder = toggle;
}


showModal(modal,localSettings,toggle);
};

var createModalBg = function () {

       
        if ( document.querySelector('[data-modal-bg]') ) return;

       
        var modalBg = document.createElement('div');
        modalBg.setAttribute('data-modal-bg', true);
        modalBg.classList.add( 'modal-bg' );

       
        document.body.appendChild(modalBg);

    };
   
    closeModal = function () {
       
        var localSettings = settings;
       
        var modal = document.querySelector( localSettings.selectorWindow + '.' + localSettings.modalActiveClass );
       
       if ( !modal ) return;
        modal.classList.remove( localSettings.modalActiveClass );
        removeModalBg();
        state = 'closed';
       
        if ( localSettings.preventBGScroll ) {
            document.documentElement.style.overflowY = '';
            document.body.style.overflowY = '';
            document.body.style.paddingRight = '';
        }
        localSettings.callbackClose( placeholder, modal );
       
         if ( placeholder ) {
            placeholder.focus();
            placeholder = null;
        }
       
    }
    var removeModalBg = function () {
        var modalBg = document.querySelector( '[data-modal-bg]' );
       
        if ( !modalBg ) return;
        document.body.removeChild( modalBg );
    };

var showModal = function(modal, localSettings,toggle)
{

   modal = document.getElementById("modal2");
   modal.classList.add( "active" );
   createModalBg();
 
 
       
 

   state = 'open';

   var attr = $(toggle).attr('data-target');
 
 
   if($(toggle).attr("data-target")=='#socialModal')
    {
   
      document.getElementById("showModal1").innerHTML = "Однокласники, Вконтакте, Mail.ru";
     
    }
 
   if(typeof attr === typeof undefined && attr !== false)
   {
       
     document.getElementById("showModal1").innerHTML = '<img src=\''+$(toggle)[0].href+'\'/>'
   }
     modal.setAttribute( 'tabindex', '-1' );
     modal.focus();
    if ( localSettings.preventBGScroll ) {
               if ( localSettings.preventBGScrollHtml ) {
                   document.documentElement.style.overflowY = 'hidden';
               }
              if ( localSettings.preventBGScrollBody ) {
                  document.body.style.overflowY = 'hidden';
               }
               document.body.style.paddingRight = '16px';
           }


}


var onClickOrTap = function (elem, callback, destroy) {

  var onClickEvent = function (event) {
     
           
            if ( isTouch ) {
                isTouch = false;
                return;
            }

           
            callback(event);
  };
  elem.addEventListener('click', onClickEvent, false);
};

var getClosest = function ( elem, selector ) {
       
       
       
        if (!Element.prototype.matches) {
            Element.prototype.matches =
                Element.prototype.matchesSelector ||
                Element.prototype.mozMatchesSelector ||
                Element.prototype.msMatchesSelector ||
                Element.prototype.oMatchesSelector ||
                Element.prototype.webkitMatchesSelector ||
                function(s) {
                    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                        i = matches.length;
                   
                       
                    while (--i >= 0 && matches.item(i) !== this) {}
                    return i > -1;
                };
        }
       
     
       
        for ( ; elem && elem !== document; elem = elem.parentNode ) {
           
           
            if ( elem.matches( selector ) ) return elem;
            if ( $(elem).attr("class")==='photo' ) return elem;
           
        }

        return null;

    };


var eventHandler = function (event) {
    var key = event.keyCode;
   
    var toggle = event.target;
   
    var close = getClosest(toggle, settings.selectorClose);
    var open = getClosest(toggle, settings.selectorToggle);
    var modal = getClosest(toggle, settings.selectorWindo);
   
     var attr = $(toggle).attr('data-target');
   
   
    if ( toggle ) {
     if(open)
     {
       event.preventDefault();
       if(typeof attr === typeof undefined && attr !== false)
       {
           openModal(open, "#"+settings.modalClass);
       }else
       {
           openModal( open, open.getAttribute('data-modal') );
       }
   
     }else
     if(state === 'open')
     {
      closeModal();
     }
     
    }
   
};

onClickOrTap(document, eventHandler);
document.addEventListener('keydown', eventHandler, false);
</script>
<!-- Картинка при щелчке открывается в модальном окне -->
<a target="_blank" class="photo" href="files/img/big_img.jpg">
<img src="files/img/small_img.jpg"></a>
<!-- Картинка при щелчке открывается в модальном окне -->

<!--Социальный замок-->
<div id="social_locker_1" class="social_locker">
  <div class="social_lock">
    <div class="hide_block">
      <div id="social_1">skachat_file1</div>
      <div id="test_1">1</div>
    </div>
    <p>Этот контент закрыт </p>
    <p>Пожалуйста, нажмите значок социальной сети ниже, чтобы разблокировать контент</p>
  <img alt="Социальный замок" src="blockquote-info-ico.png" class="icon_fb" data-modal="#modal2"
  data-target="#socialModal" data-up-total="1">
  </div>
</div>
<!--Социальный замок-->

<!--Блок показа модального окна-->
<div id="content_show_1" class="content_show"></div>
<div class="modal" data-modal-window id="modal2">
  <a  class="close" data-modal-close>x</a>
      <div id="showModal1" style="background-color:#424141"></div>
      <br>
    <button data-modal-close>Закрыть</button>  
</div>
<!--Блок показа модального окна-->
Вот стили:
CSS:
html, body {margin:0;height:100%;font:100% tahoma, arial, sans-serif;font-size:14px;}

/*Модальное окно*/
.modal {
  background-color: #ffffff;
  border: 0.0725em solid #e5e5e5;
  border-radius: 0.0725em;
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
  display: none;
  max-width: 100%;
  padding: 0.5em 1em;
  visibility: hidden;
  z-index: 9999;
}




.modal.active {
  display: block;
  height: 100%;
  left: 0;
  max-height: 100%;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  visibility: visible;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 30em) {
.modal.active {
    height: auto;
    left: 3%;
    margin-left: auto;
    margin-right: auto;
    right: 3%;
    top: 50px;
  }
}

/**
* Modal background
*/
.modal-bg {
  background-color: #272727;
  bottom: 0;
  position: fixed;
  left: 0;
  opacity: .9;
  right: 0;
  top: 0;
  z-index: 9998;
}

/**
* Close button
*/

.close {
  color: #808080;
  cursor: pointer;
  float: right;
  font-weight: bold;
  font-size: 1.5em;
  text-decoration: none;
}


.close:hover {
  color: #5a5a5a;
  cursor: pointer;
}
 
Сверху