Форум

gradov81 · #11 (**permalink**) 07.11.2014, 22:09

Сообщение от рони

gradov81,
наличие кода повышает вероятность, что вам ответят

Это родной код рекомендуемый создателем fancybox. При его использовании, если в css есть html {height: 100%;}, происходит скрол в верхнюю часть страницы когда нажимаешь на фото:

$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});

Этим кодом устраняется эта проблема (взят с этой страницы форума):

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

при вызове фото скрола нет, а вот при нажатии на прокрутку следующего или предыдущего фото срабатывает скрол в верхнюю часть.
Если не ошибаюсь, за прокрутку фото отвечает функция:
$.fancybox.next
$.fancybox.prev

При срабатывании этих функций происходит скрол вверх страницы.

рони · #12 (**permalink**) 07.11.2014, 22:41

gradov81,
http://fancyapps.com/fancybox/

если там у вас непрыгает, значит в вашем коде не учитывается нажатие на ссылку и идёт по ней переход.
либо вёрстка барахлит, либо return false нужен.

пишите макет
смотрите код ниже -- прыгает или нет???

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>

  <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
  <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">


  <style type='text/css'>
     div.hh{
       height: 2000px;
     }
    html {height: 100%;}
  </style>



<script type='text/javascript'>
$(function(){
$(document).ready(function() {
 $(".fancybox").fancybox({
 openEffect : 'none',
 closeEffect : 'none'
 });
 });

});

</script>


</head>
<body>
<div class="hh"></div>
  <a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>


</body>


</html>

gradov81 · #13 (**permalink**) 08.11.2014, 12:14

Сообщение от рони

gradov81,

если там у вас непрыгает, значит в вашем коде не учитывается нажатие на ссылку и идёт по ней переход.
либо вёрстка барахлит, либо return false нужен.

пишите макет
смотрите код ниже -- прыгает или нет???

Проблема с
html, body {
height:100%;
}
Без него всё работает корректно, но разваливается вёрстка.
Я не силён Javascript, но думаю эту проблему можно решить с помощью него.
Может кто поможет?

рони · #14 (**permalink**) 08.11.2014, 12:25

Сообщение от gradov81

Может кто поможет?

кто вам без кода поможет?

danik.js · #15 (**permalink**) 08.11.2014, 16:55

Сообщение от gradov81

html, body {
height:100%;
}

html{height:100%} оставить можно, а body - нет. Если верстка разваливается, значит она сделана криво, js не сделает ее ровней ))

Форум

Справочник

Discord чат

Курсы javascript