Почему JQuery scrollTop () не работает

У меня два divs, и у каждого по два classes, скрыто и показано (классы необходимы для адаптивного Интернета).

HTML

<!-- buttons -->
<div class="jump_to_raspored_busa_sidemenu">Cjenik</div>
<div class="jump_to_cjenik_sidemenu">Raspored</div>

<!-- parts -->
<div class="cjenik shown">Cjenik scroll</div>
<div class="zet_linije hidden">Zet linije</div>
<div class="zet_linije shown">Zet linije</div>
<div class="cjenik hidden">Cjenik scroll</div>

JQuery

$('.jump_to_raspored_busa_sidemenu').on('click',function(){
    $("html, body").animate({ scrollTop: $('.cjenik').offset().top }, 1000);
});

$('.jump_to_cjenik_sidemenu').on('click',function(){
    $("html, body").animate({ scrollTop: $('.zet_linije').offset().top }, 1000);
});

Когда я нажимаю Cjenik, scrollTop работает нормально. Но когда я нажимаю Raspored, он не прокручивается вниз.

Почему это работает для части Cjenik, но не для части Raspored?

JSFiddle


jquery scrolltop
person Vucko    schedule 28.03.2013    source источник
comment
Это потому, что селектор $('.zet_linije') соответствует нескольким элементам.   -  person Martin    schedule 28.03.2013
comment
начать отладку, регистрируя offset().top при щелчке и посмотреть, что он возвращает? on('click',function(){ console.log( $('.cjenik').offset().top); ... })   -  person lordvlad    schedule 28.03.2013
comment
@Martin Так делает $('.cjenik'), но для него это работает.   -  person Vucko    schedule 28.03.2013
comment
Он получает первый элемент в наборе .zet_linije, а смещение на нем возвращает 0. Настройте таргетинг на последний, см. FIDDLE   -  person adeneo    schedule 28.03.2013

Ответы (2)


arrow_upward
3
arrow_downward

Это потому, что у вас есть два элемента с этим классом .zet_linije, и он совпадает с первым (который скрыт, поэтому у него нет offset top).

Я использую ваш класс .shown для нацеливания видимого элемента на класс .zet_linije

Попробуй это:

$('.jump_to_cjenik_sidemenu').on('click',function(){
    $("html, body").animate({ scrollTop: $('.zet_linije.shown').offset().top }, 1000);
});

ДЕМО: http://jsfiddle.net/34yGK/5/

Причина, по которой это работает для вашего другого, заключается в том, что если мы посмотрим на DOM:

<div class="cjenik shown">Cjenik scroll</div>
<div class="zet_linije hidden">Zet linije</div>
<div class="cjenik hidden">Cjenik scroll</div>
<div class="zet_linije shown">Zet linije</div>

Элемент shown является первым в DOM для .cjenik, поэтому он возвращается, когда вы просто выполняете $(".cjenik").offset() , тогда как для zet_linije первым идет hidden.

person mattytommo    schedule 28.03.2013
comment
можно также использовать $('.zet_linije:visible') - person lordvlad; 28.03.2013
comment
@Vucko Потому что элемент shown на .cjenik перед скрытым в структуре HTML. Это не относится к .zet_linije. - person mattytommo; 28.03.2013
comment
@lordvlad Можно, но с таким же успехом можно использовать классы, которые он уже использует. - person mattytommo; 28.03.2013
comment
@mattytommo Итак, проблема была в HTML. Я такой глупый. Что означает $('.zet_linije.shown') (селектор)? Выбирает <div class="zet_linije shown">... или <div class="zet_linije><div class="shown">..."? - person Vucko; 28.03.2013
comment
@Vucko Поскольку места нет, это означает элемент с обоими классами. Таким образом, 1_ - person mattytommo; 28.03.2013

arrow_upward
2
arrow_downward

Это работает. jQuery не может отличить скрытый div от показанного. Вам нужно анимировать вот так

$("html, body").animate({ scrollTop: $('.zet_linije.shown').offset().top }, 1000);

См. Здесь http://jsfiddle.net/34yGK/3/.

Он работает для обеих ссылок. Просто ссылка .cjenik находится выше в HTML.

person magi182    schedule 28.03.2013