fancybox смещение страницы вверх при клике по ссылке

[spo]

При клике по ссылке class="fancybox" происходит прокрутка страницы на самый верх. Скрипт за исключением этой маленькой проблемы работает должным образом. Консоль FireBug не выдает никаких ошибок.

В интернете находил сообщения с описанием аналогичной проблемы, но к сожалению ответов не нашел.

[spo]

Нашел проблему, но не нашел решения.
В стилях использую html, body {height: 100%;} для того чтобы прижать подвал к низу окна браузера. Если данную строку убрать то прокрутки не происходит. Но как решить проблему не убирая нужные стили?

[danik.js]

body{height: 100%} - это зло. С html еще ок, но body должен принимать высоту всего содержимого, а не высоту окна. Изменяйте свой код прибивки подвала.

[рони]

spo,
return false или event.preventDefault() хотя плагин fancybox должен сам отменять всплытие либо нарушена разметка html

[spo]

danik.js, именно должен?
Странно, пользуюсь способом давно, способ самый распространенный среди верстальщиков, описан во многих статьях на многих ресурсах. Это конечно не о чем не говорит, но я никогда ничего подобного про body не слышал.
С чем связано такое правило и где о нем можно почитать?

[BETEPAH]

как же я мечтаю о CSS-правиле: {display: block-footer }

[danik.js]

danik.js, именно должен?

Ну нет, не должен. И тогда возможны вот такие глюки как этот. Потому что по умолчанию все считают что body имеет высоту контента. Это помоему вполне очевидно и ожидаемо. Если верстальщик чего-то намудрил и в итоге body режется по высоте, то понятное дело могут возникать проблемы.

[Gurylyov]

Если вдруг ещё не решили вопрос:
Решается вызовом фэнси с блоком прокрутки

$(".fancybox").fancybox({
        padding : 0,
	helpers: {
		overlay: {
			locked: false
		}
	}
});

[gradov81]

$(".fancybox").fancybox({
        padding : 0,
	helpers: {
		overlay: {
			locked: false
		}
	}
});

У меня этот вариант решает проблему с вызовом первого изображения. Если нажать "Next" или "Prev" страница скролится вверх.
Как решить эту проблему, не знаете?

[danik.js]

как же я мечтаю о CSS-правиле: {display: block-footer }

Я в последнее время использую примерно такие правила:

<style>
html, body{margin: 0; padding: 0}
body{
	/* stick footer to bottom */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main{
	background: yellow;
	/* stick footer to bottom */
	flex: 1;
	-ms-flex-preferred-size: auto; /* override autoprefixer */
}
footer{
	background: red;
	height: 50px;
}
</style>
<main></main>
<footer></footer>