Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   fancybox смещение страницы вверх при клике по ссылке (https://javascript.ru/forum/jquery/41953-fancybox-smeshhenie-stranicy-vverkh-pri-klike-po-ssylke.html)

spo 06.10.2013 19:52

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

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

spo 06.10.2013 19:55

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

danik.js 06.10.2013 20:29

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

рони 06.10.2013 21:55

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

spo 07.10.2013 18:56

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

BETEPAH 07.10.2013 20:05

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

danik.js 07.10.2013 21:19

Цитата:

Сообщение от spo
danik.js, именно должен?

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

Gurylyov 17.07.2014 16:57

Если вдруг ещё не решили вопрос:
Решается вызовом фэнси с блоком прокрутки
$(".fancybox").fancybox({
        padding : 0,
	helpers: {
		overlay: {
			locked: false
		}
	}
});

gradov81 07.11.2014 17:35

Цитата:

Сообщение от Gurylyov (Сообщение 321504)
Если вдруг ещё не решили вопрос:
Решается вызовом фэнси с блоком прокрутки
$(".fancybox").fancybox({
        padding : 0,
	helpers: {
		overlay: {
			locked: false
		}
	}
});

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

danik.js 07.11.2014 17:43

Цитата:

Сообщение от BETEPAH
как же я мечтаю о 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>

BETEPAH 07.11.2014 18:18

Вложений: 1
danik.js
я пробовал этот код, но сафари его ломает, увы.

danik.js 07.11.2014 18:44

Префиксы проставил? Сафари смотри версию смотри caniuse поддержку флексы что ты как новичек. Или флексы поддерживает но неправильно работает?

BETEPAH 08.11.2014 18:25

Цитата:

Сообщение от danik.js
Или флексы поддерживает но неправильно работает?

Поддерживает. Последний сафари на маке. Насколько я помню в нем проблемы с flex-direction: column, но могу ошибаться. Сейчас мака под рукой нет, в понедельник на рабочем тестовом смогу посмотреть

emptyindorill 19.05.2015 18:56

Здравствуйте, сверстал свой сайт из section, у которых как и у html с body width и height: 100%, на сайте использую fancybox2, проблема в том что раньше при клике окно скроллило к топу сайта, почитав форумы и помучавшись с настройками, у меня более менее получилось сделать так что бы при клике не было скролла, но при закрытии окна скролл всё же остался. Сайт. Подскажите пожалуйста как сделать что бы не было прокрутки топу?


Часовой пояс GMT +3, время: 15:11.