Почему страница скроллится вверх, когда кликаю на кнопку для вызова попапа?

Question

[Сергей Бурдужа]

Добрый день.
Создал модальное окно с формой, пока только верстка.
Вот сама форма

<div class="popup-address" id="js-popup-address">
    <a class="popup-address__close" href="#" id="js-popup-address__close"></a>
    <div class="popup-address__content">
        <div class="popup-address__form">
            <div class="form-group">
                <input type="text" name="nome" placeholder="Nome">
            </div>
            <div class="form-group">
                <input type="text" name="cognome" placeholder="Cognome">
            </div>
            <div class="form-group">
                <input type="email" name="email" placeholder="Email">
            </div>
            <div class="form-group">
                <input type="tel" name="telefono" placeholder="Telefono">
            </div>
            <div class="form-group">
                <textarea name="messaggio" placeholder="Messaggio"></textarea>
            </div>
            <div class="privacy">
                <input id="check" type="checkbox" name="check">
                <label for="check">Dichiaro di aver letto ed accettato l'informativa sulla privacy
                    <a href="/privacy/">(Leggi l'informativa)</a>
                </label>
            </div>
            <input class="btn btn--transparent btn--block" type="submit" value="Invia Richiesta">
        </div>
    </div>
</div>

Есть кнопка, при клике на ней появляется попап, при этом страница скроллится вверх.

let popupAddress = function () {
		$('.btn--popup-address').on('click', function (e) {
			e.preventDefault();

			$('body').addClass('body--fixed');
			$('#js-overlay').fadeIn();
			$('#js-popup-address').fadeIn();
		});

		$('#js-popup-address__close, #js-overlay').on('click', function (e) {
			e.preventDefault();

			$('body').removeClass('body--fixed');
			$('#js-overlay').fadeOut();
			$('#js-popup-address').fadeOut();
		});
	};
	popupAddress();

html {
	height: 100%;
}

body.body--fixed {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
}

При клике на любой из кнопок "Contact us now"

borgoluce.ml/en/ristoranti

Первый раз сталкиваюсь с таким поведением.
В чем может быть причина?
Заранее благодарен за помощь.

Comments

[yarnstart]

можно javascript:void(0); вместо # написать

[Mesuti]

Попробуйте сделать кнопку кнопкой, а не ссылкой

[Сергей Бурдужа]

Евгений, Не работает, здесь что-то другое.

[Сергей Бурдужа]

Mesuti, Сделал кнопку кнопкой, и все-равно скролистя вверх

Answer 1

[Дмитрий Соколов]

У кнопок стоит href="#", убери href вообще.

Comments

[Сергей Бурдужа]

Я href с самого начала убрал.
Это не мой первый попап, e.preventDefault для того, чтобы href не срабатывал.

[Сергей Бурдужа]

Я у html добавил зеленый border. Как видно он не на всей высоте документа i.imgur.com/keiR3fJ.png

Может в этом проблема, хотя добавил height 100%.

[Дмитрий Соколов]

При появлении popup'a у body добавляется class="body--fixed", убирай.

[Сергей Бурдужа]

Так я этот класс и задал, чтобы когда появляется попап, пользователь не смог скролить страницу.

[Дмитрий Соколов]

Из-за того, что body присваивается position: fixed; он и перетаскивает тебя наверх.
Скролл нужно убрать другим способом.

[Сергей Бурдужа]

Дмитрий Соколов, Дело в том, что у body высота 400px а у html - 900. Почему так?
i.imgur.com/iGLcXf1.png

[Дмитрий Соколов]

Попробуй у класса body--fixed убрать position: fixed

[Сергей Бурдужа]

Дмитрий Соколов, Да, спасибо.
Убрал позиционирование, и оставил только overflow и сработало.
Просто подсмотрел на другом проекте, там тоже так сделанно.
Но, я точно помню, что на одном из проектов, только overflow не убирал скролл страницы, и пришлось добавить и позиционирование.

Спасибо вам огромное.

[Егор Кругликов]

Сергей Бурдужа, Я допустим , для скрытия скролла делаю так:
$('html, body').addClass('js-noscroll')

CSS:

html.js-noscroll,
body.js-noscroll { overflow:hidden; }

[Сергей Бурдужа]

devChristmas, Спасибо. Возьму на вооружении.

[Сергей Василенко]

Дмитрий Соколов,
У меня bootstrap.js например в body добавляет класс

CSS:

.modal-open {
  overflow: hidden;
}

Именно overflow: hidden; подбрасывает страницу вверх, пока убрал его

Спасибо за наводку)