Почему Magnific-Popup скроллит элемент к началу страницы, если элементу задать display: none?

Question

[ilya_tsym]

Всем привет. Подключил magnific-popup, вызываю с помощью него форму по клике на ссылку:

<!-- Форма -->
	<div id="form-wrapper" class="form-wrapper">
		<form id="form" class="form" name="form">
			<input required type="text" class="form__input" name="name" placeholder="ИМЯ">
			<input required type="email" class="form__input" name="email" placeholder="E-MAIL">
			<input required type="text" class="form__input" name="phone" placeholder="ТЕЛЕФОН">
			<button class="form__button">ЗАКАЗАТЬ КОНСУЛЬТАЦИЮ</button>
		</form>
	</div>

Соответсвенно, чтобы ее скрыть прописываю ей display: none, а затем при клике на ссылку добавляю класс с display: block:

// Форма в модальном окне 
$('#popup-form').magnificPopup({
   type: 'inline'
});


$(function(){
    $("#popup-form").click(function(){
        $("#form-wrapper").addClass("form-wrapper_display_block"); return false;
    });
});

Без display: none форма всплывает нормально, наверх не скроллится. Если же скрыть, то при первом нажатии на ссылку, страница скроллится к началу, а при последующих нажатиях не скролится до обновления страницы.

Еще такой момент, при открытии формы, фон немного сдвигается влево, после закрытия возвращается назад. Заранее спасибо.

UPD: Первая проблема была в том, что в href был указан id формы, после того, как указал класс, фомра перестала скроллится наверх. Вторая проблема - magnific добавляет margin-right к тегу html, при открытии попапа.

Comments

[Ба Ань Доан]

Еще такой момент, при открытии формы, фон немного сдвигается влево, после закрытия возвращается назад. Заранее спасибо.

Скорее всего потому, что при открытии окна, magnific popup скрывает overflow (скроллбар).

Answer 1

[Михаил Завалко]

dimsemenov.com/plugins/magnific-popup/documentatio... вот чтобы не скролилось наверх ставь false если еще надо)) кстати твой вариант прописания класса в href не проканал, все равно скачет наверх.